# TextInput Collects single-line text with Noora labels, hints, prefixes, and suffixes. ```html ``` ## Attributes | Attribute | Type or allowed values | Default | Description | | --- | --- | --- | --- | | `type` | `basic`, `email`, `card_number`, `search`, `password` | `"basic"` | Controls the semantic field presentation. | | `input-type` | `string` | `"text"` | Sets the native input type for basic fields. | | `label` | `string` | None | Sets the field label. | | `sublabel` | `string` | None | Sets secondary label text. | | `hint` | `string` | None | Sets supporting text. | | `hint-variant` | `default`, `destructive`, `disabled` | `"default"` | Controls hint semantics. | | `error` | `string` | None | Sets the validation error. | | `name` | `string` | `""` | Sets the submitted field name. | | `value` | `string` | `""` | Gets or sets the field value. | | `placeholder` | `string` | None | Sets placeholder text. | | `required` | `boolean` | `false` | Marks the field as required. | | `show-required` | `boolean` | `false` | Shows the required indicator. | | `min` | `string` | None | Sets the native minimum value. | | `max` | `string` | None | Sets the native maximum value. | | `step` | `string` | None | Sets the native step value. | | `disabled` | `boolean` | `false` | Disables the field. | ## Read-only properties | Property | Type | Description | | --- | --- | --- | | `control` | `HTMLInputElement \| null` | The native input. | | `form` | `HTMLFormElement \| null` | The associated form. | ## Events | Event | Type | Description | | --- | --- | --- | | `input` | `InputEvent` | Emitted while the input value changes. | | `change` | `Event` | Emitted after the input value is committed. | ## Slots | Slot | Description | | --- | --- | | `prefix` | A custom prefix for basic fields. | | `suffix` | A custom suffix. | ## Styling parts | Part | Description | | --- | --- | | `input` | The native input. | | `wrapper` | The input wrapper. | The component emits standard input and change events. ## Input types Use basic, email, card-number, search, and password presentations. ```html ``` ## With hint Give supporting guidance below the input. ```html ``` ## Error Communicate validation failures. ```html ``` ## Custom suffix Provide a custom element after the native input. ```html ``` ## Labels Show required and secondary label content. ```html ``` ## Disabled Compare empty and filled disabled fields. ```html ```