Input
FormText input with label, help text, error state and icon slots.
Playground
Controls
Placeholder text.
Disable the input.
Show error state.
Read-only mode.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
placeholder | string | — | Placeholder text. |
modelValue | string | — | v-model binding. |
disabled | boolean | false | Disabled state. |
error | boolean | false | Error state. |
readonly | boolean | false | Readonly mode. |
type | string | 'text' | Input type attribute. |
Examples
Default
vue
<DsInput placeholder="Enter text..." />Disabled
vue
<DsInput
placeholder="Disabled input"
disabled
/>Error
vue
<DsInput
placeholder="Invalid value"
error
/>Readonly
vue
<DsInput readonly>
Read only value
</DsInput>Skeleton
Use DsInputSkeleton as a loading placeholder while content is being fetched.
Default
vue
<DsInputSkeleton />With Label
vue
<DsInputSkeleton hasLabel />With Help
vue
<DsInputSkeleton
hasLabel
hasHelpText
/>Accessibility
- Always pair with a DsLabel using matching id/for attributes.
- Error state sets aria-invalid="true".