# `Noora.TextInput`

Renders text input and digit input components with customizable types, labels, placeholders, prefixes, suffixes, and event handling.

## Example

```elixir
<.text_input name="username" label="Username" placeholder="Enter username" />
<.text_input type="email" name="email" label="Email" required={true} show_required={true} />
<.text_input type="password" name="password" label="Password" hint="Must be at least 8 characters" />
<.text_input type="search" name="search" placeholder="Search..." />

<.digit_input id="otp-input" characters={6} otp={true} on_complete="verify_otp" />
```

# `digit_input`

## Attributes

* `id` (`:string`) (required)
* `type` (`:string`) - Defaults to `"numeric"`. Must be one of `"alphanumeric"`, `"numeric"`, or `"alphabetic"`.
* `characters` (`:integer`) (required) - The number of characters in the input.
* `placeholder` (`:string`) - Defaults to `nil`.
* `otp` (`:boolean`) - Defaults to `false`.
* `error` (`:boolean`) - Defaults to `false`.
* `disabled` (`:boolean`) - Defaults to `false`.
* `on_change` (`:string`) - Event handler for when the input changes. Triggers the event with value `{ value: string[],
      valueAsString: string }`

  Defaults to `nil`.
* `on_complete` (`:string`) - Event handler for when the input is complete. Triggers the event with value `{ value: string[],
      valueAsString: string }`

  Defaults to `nil`.
* `on_invalid` (`:string`) - Event handler for when the input is invalid. Triggers the event with value `{ value: string[],
      valueAsString: string }`

  Defaults to `nil`.
* Global attributes are accepted.

# `text_input`

## Attributes

* `id` (`:string`)
* `field` (`Phoenix.HTML.FormField`) - A Phoenix form field.
* `type` (`:string`) - Type of the input. Defaults to `"basic"`. Must be one of `"basic"`, `"email"`, `"card_number"`, `"search"`, or `"password"`.
* `input_type` (`:string`) - HTML input type when type is `basic`. Defaults to `"text"`.
* `label` (`:string`) - Label to be rendered in the input. Defaults to `nil`.
* `sublabel` (`:string`) - Sublabel to be rendered in the input. Defaults to `nil`.
* `hint` (`:string`) - Hint text to be rendered below the input. Defaults to `nil`.
* `hint_variant` (`:string`) - Hint text variant. Defaults to `"default"`.
* `error` (`:string`) - Errors to be rendered below the input. Takes precedence over `hint`.
* `show_error_message` (`:boolean`) - Whether to show the error message below the input. Defaults to `true`.
* `show_prefix` (`:boolean`) - Whether to show the prefix. Defaults to `true`.
* `show_suffix` (`:boolean`) - Whether to show the suffix. Defaults to `true`.
* `suffix_hint` (`:string`) - Hint text to show as tooltip at the end of the input. Takes precedence over the suffix set by `type`. Defaults to `nil`.
* `name` (`:string`) - The name of the input.
* `value` (`:string`) - The value of the input.
* `placeholder` (`:string`) - Placeholder text to be rendered in the input. Defaults to `nil`.
* `required` (`:boolean`) - Whether the input is required. Defaults to `false`.
* `show_required` (`:boolean`) - Whether the required indicator is shown. Defaults to `false`.
* `min` (`:any`) - Minimum value for number inputs. Defaults to `nil`.
* `max` (`:any`) - Maximum value for number inputs. Defaults to `nil`.
* `step` (`:any`) - Step value for number inputs. Defaults to `nil`.
* `disabled` (`:boolean`) - Whether the input is disabled. Defaults to `false`.
* Global attributes are accepted.
## Slots

* `prefix` - Prefix to be rendered in the input. Only shown when type is `basic`.
* `suffix` - Suffix to be rendered in the input. Takes precedence over `suffix_hint`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*