Components
TextInput
A single-line text input with label, prompt, and validation
A single-line text input field with label, prompt prefix, placeholder, character count, validation states, and controlled/uncontrolled modes.
TextInput
Run demo
bunx @gridland/demo text-inputcurl -fsSL https://raw.githubusercontent.com/thoughtfulllc/gridland/main/scripts/run-demo.sh | bash -s text-inputInstallation
bunx shadcn@latest add @gridland/text-inputUsage
import { TextInput } from "@/components/ui/text-input"<TextInput
label="Username"
placeholder="enter your name"
prompt="> "
/>Examples
Form
Multiple inputs composed into a form with keyboard navigation.
TextInput
Controlled
Use value and onChange to control the input externally.
const [value, setValue] = useState("")
<TextInput
label="Email"
value={value}
onChange={setValue}
onSubmit={(v) => console.log("Submitted:", v)}
placeholder="user@example.com"
prompt="> "
/>Required
Show a required indicator (*) next to the label.
<TextInput
label="Name"
placeholder="enter your name"
prompt="> "
required
/>Description
Display helper text inline next to the label.
<TextInput
label="Email"
placeholder="user@example.com"
prompt="> "
description="We'll never share your email"
/>Error
Pass an error string to show a validation message. It replaces the description.
<TextInput
label="Email"
placeholder="user@example.com"
prompt="> "
error="This field is required"
/>Max Length
Limit input length and show a character counter when the user starts typing.
<TextInput
label="Bio"
placeholder="tell us about yourself"
prompt="> "
maxLength={100}
/>Disabled
A disabled input ignores focus and keystrokes.
<TextInput
label="API Key"
placeholder="sk-..."
prompt="> "
disabled
/>Controls
- Enter: Submit the current value
- ↑/↓: Navigate between fields (when composed in a form)
API Reference
TextInput
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | - | Field label shown above the input |
description | string | - | Helper text shown inline next to the label |
error | string | - | Error message — overrides description when set |
required | boolean | false | Show required indicator (*) on the label |
disabled | boolean | false | Disable the input |
value | string | - | Controlled value |
onChange | (value: string) => void | - | Called on every keystroke |
onSubmit | (value: string) => void | - | Called when Enter is pressed |
placeholder | string | - | Hint text shown when the input is empty |
prompt | string | - | Prompt string before the input (e.g. "> ") |
focus | boolean | true | Whether the input is focused and accepting keystrokes |
maxLength | number | - | Maximum characters allowed (shows counter when typing) |