TextInput

A text input field with optional label and hint.

Examples

Model name

<script setup>
import { ref } from "vue";
const name = ref("");
</script>

<TextInput
  v-model="name"
  label="Model name"
  placeholder="e.g. my-model"
  hint="A short identifier used in URLs"
/>

Hidden label

Use hide-label to visually hide the label while keeping it available to screen readers. The label is still a real <label> in the DOM, so clicking the input area still works and the control is properly named for assistive tech. Prefer this over omitting the label whenever the input has no visible text describing it.

Search

<TextInput v-model="name" label="Search" placeholder="Search…" hide-label />

Model

Name	Type
v-model	string

Props

Prop	Type	Required	Default
label	string	No	—
hideLabel	boolean	No	—
placeholder	string	No	—
hint	string	No	—