# `m-textinput`

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.

## 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` |   |
| `value` | The current value of the input field. | `string` `number` | `$bindable()` |
| `placeholder` | A placeholder text to show in the input when it is empty. | `string` |   |
| `inputtype` | Defines the type of input. | `'date'` `'datetime-local'` `'email'` `'number'` `'password'` `'search'` `'tel'` `'text'` | `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` |
| `prefix` | Displays additional text inside the component, before the input. | `string` |   |
| `suffix` | Displays additional text inside the component, after the input. | `string` |   |
| `element` |  | `HTMLElement` `null` | `$bindable()` |

## Slots

| Name | Description |
|------|-------------|
| `icon` | Use this slot to insert an icon in the input. |

## Dependencies

### Used By

- [m-option-listbox](../optionlistbox/README.md)

### Graph

```mermaid
graph TD;
  m-option-listbox --> m-textinput
style m-textinput fill:#008240,stroke:#333,stroke-width:4px
```
