Text Input
A component that allows users to enter text.
Installation
npx shadcn@latest add @tetra-ui/text-inputUsage
import { TextInput } from "@/components/ui/text-input";<TextInput placeholder="Enter your username" />With Addons
Add leading or trailing content with InputAddon. Use align="inline-end" to place addons on the right:
import {
InputAddon,
InputAddonButton,
InputAddonButtonIcon,
InputAddonIcon,
} from "@/components/ui/input";
import { BadgeCheckIcon, XIcon } from "@/components/ui/icons";
<TextInput placeholder="Enter your username">
<InputAddon>
<InputAddonIcon>
<BadgeCheckIcon />
</InputAddonIcon>
</InputAddon>
<InputAddon align="inline-end">
<InputAddonButton size="icon" variant="ghost">
<InputAddonButtonIcon>
<XIcon />
</InputAddonButtonIcon>
</InputAddonButton>
</InputAddon>
</TextInput>Disabled
<TextInput disabled placeholder="Disabled" />Invalid
Pass invalid to show a destructive focus ring, typically when paired with form validation:
<TextInput invalid placeholder="Enter your username" />