Input API
API reference docs for the Stash Input component. Learn about the props, CSS, and other APIs of this exported module.
Import
ts
import Input from '@leaflink/stash/Input.vue';Props
| Name | Type | Default | Description |
|---|---|---|---|
| addBottomSpace | boolean | - | Adds spacing under the field that is consistent whether or not hint/error text is displayed. |
| autocomplete | string | 'off' | Autocomplete takes in a string of off or on |
| disabled | boolean | false | Indicates whether the input is disabled. |
| errorText | string | undefined | Error text to display. Replaces `hintText` (if provided) & adds error styling. |
| hintText | string | undefined | Displays text below the input; hidden when the isReadOnly prop is truthy. |
| id | string | undefined | ID for the Label and Input; must be unique |
| label | string | undefined | Label to render above the input. |
| modelValue | string | number | | Value for the input element. |
| placeholder | string | undefined | Placeholder text for the input. **Note:** placeholders should be used to display examples; they should not be used as labels because they are not accessible as labels. If a real label cannot be used, use the `aria-label` attribute. |
| showOptionalInLabel | boolean | - | Show "(optional)" to the right of the label text |
| type | TSConditionalType | text | Input type. Excludes certain types that have a dedicated component. Note: For distinguishing between text & number internally, passing `number` will still render an input with a type of `text` (for localization). |
| value | string | number | null | null |
Slots
| Name | Description |
|---|---|
| prepend | renders content on the left side of the input |
| append | renders content on the right side of the input |
| hint |
Events
| Name | Description |
|---|---|
| update:model-value | Emitted when the input value changes. |
| change | Emitted when the input value changes. |
| focus | Emitted when the input is focused |
| blur | Emitted when the input is blurred |