@mozaic-ds/vue
Version:
Mozaic-Vue is the Vue.js implementation of ADEO Design system
33 lines (24 loc) • 1.92 kB
Markdown
# MTextInput
A text input is a single-line input that allows users to enter and edit short text-based content. It is commonly used for names, email addresses, search queries, and form entries. Text Inputs often include placeholders, validation rules, and assistive text to guide users and ensure accurate data entry.<br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field section](/docs/form-elements-field--docs#input).
## Props
| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `id*` | A unique identifier for the input element, used to associate the label with the form element. | `string` | - |
| `name` | The name attribute for the input element, typically used for form submission. | `string` | - |
| `modelValue` | The current value of the input field. | `string` `number` | - |
| `placeholder` | A placeholder text to show in the input when it is empty. | `string` | - |
| `inputType` | Defines the type of input. | `"number"` `"text"` `"date"` `"email"` `"password"` `"search"` `"tel"` | `"text"` |
| `isInvalid` | If `true`, applies an invalid state to the input. | `boolean` | - |
| `disabled` | If `true`, disables the input, making it non-interactive. | `boolean` | - |
| `size` | Determines the size of the input. | `"s"` `"m"` | `"m"` |
| `readonly` | If `true`, the input is read-only (cannot be edited). | `boolean` | - |
| `isClearable` | If `true`, a clear button will appear when the input has a value. | `boolean` | - |
| `clearLabel` | The label text for the clear button. | `string` | `"clear content"` |
## Slots
| Name | Description |
| --- | --- |
| `icon` | Use this slot to insert an icon in the input. |
## Events
| Name | Description | Type |
| --- | --- | --- |
| `update:modelValue` | Emits when the input value changes, updating the `modelValue` prop. | [value: string | number] |