Overview
Forms & inputs
Design Systemv1.3.0Search documentation
Search for a command to run or a page to navigate to.
Design Systemv1.3.0Search for a command to run or a page to navigate to.
Input is a text entry field that allows users to enter and edit text in a single line.
"use client"
import { Input } from "@strongtie/design-system/input"
export function InputDefault() {
return <Input placeholder="Enter text..." />
}
import { Input } from "@strongtie/design-system/input"Not installed yet? Add the package to your app:
npm install @strongtie/design-system
All components accept standard HTML attributes and React props.
"use client"
import { Input } from "@strongtie/design-system/input"
import { Label } from "@strongtie/design-system/label"
export function InputDisabled() {
return (
<div className="flex flex-col gap-2">
<Label htmlFor="disabled-input">Disabled Input</Label>
<Input
id="disabled-input"
type="text"
placeholder="You cannot edit this"
disabled
defaultValue="This input is disabled"
/>
</div>
)
}
"use client"
import { Input } from "@strongtie/design-system/input"
import { Label } from "@strongtie/design-system/label"
export function InputTypes() {
return (
<div className="grid w-full max-w-sm gap-4">
<div className="grid items-center gap-1.5">
<Label htmlFor="text">Text</Label>
<Input type="text" id="text" placeholder="Enter text" />
</div>
<div className="grid items-center gap-1.5">
<Label htmlFor="email">Email</Label>
<Input type="email" id="email" placeholder="email@example.com" />
</div>
<div className="grid items-center gap-1.5">
<Label htmlFor="password">Password</Label>
<Input type="password" id="password" placeholder="Password" />
</div>
<div className="grid items-center gap-1.5">
<Label htmlFor="number">Number</Label>
<Input type="number" id="number" placeholder="123" />
</div>
<div className="grid items-center gap-1.5">
<Label htmlFor="date">Date</Label>
<Input type="date" id="date" />
</div>
</div>
)
}
"use client"
import { Input } from "@strongtie/design-system/input"
import { Label } from "@strongtie/design-system/label"
export function InputWithLabel() {
return (
<div className="grid w-full max-w-sm items-center gap-1.5">
<Label htmlFor="email">Email</Label>
<Input type="email" id="email" placeholder="Email" />
</div>
)
}