TextInput
import { TextInput } from '@tangible/ui';
Interactive docs and examples: TextInput in Storybook.
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).
Component API tokens
Read via fallback, never declared. Set one on an ancestor to restyle every instance under it.
--tui-input-group-gap