# TextInput

```tsx
import { TextInput } from '@tangible/ui';
```

Interactive docs and examples: [TextInput in Storybook](https://storybook-tangible-ui.pages.dev/?path=/docs/forms-textinput--docs).

## TextInput props

| Prop | Type | Default | Description |
| - | - | - | - |
| `className?` | `string` | | Additional class name applied to the root wrapper element. |
| `inputClassName?` | `string` | | Class name applied directly to the `<input>` element. Use for utilities like `tui-input-reset` (removes browser-native search decoration, clear buttons, and spinners) that must target the input itself. |
| `prefix?` | `ReactNode` | | Content to render before the input (icon, text). |
| `size?` | `"lg" \| "md" \| "sm"` | `'md'` | Control size. |
| `suffix?` | `ReactNode` | | Content to render after the input (icon, button). |
| `type?` | `"email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "url"` | `'text'` | Input type. |

Also accepts the standard attributes of `InputHTMLAttributes` (`data-*`, `aria-*`, event handlers), passed to the element it renders.

## Examples

Stories: Basic, Controlled, Types, With Prefix, With Suffix, With Prefix And Suffix, Text Addons, Mixed Addons (Icon + Text), Disabled, Read Only, Invalid, With Field, Search Pattern (SearchInput Preview), Sizes ([interactive page](https://storybook-tangible-ui.pages.dev/?path=/docs/forms-textinput--docs)).

## Component API tokens

Read via fallback, never declared. Set one on an ancestor to restyle every instance under it.

- `--tui-input-group-gap`

---

Interactive version: https://storybook-tangible-ui.pages.dev/?path=/docs/forms-textinput--docs