Shadcn inputs
Form controls use shadcn components from @/components/Shadcn. Compose labels and validation with Field.
import { Input } from '@/components/Shadcn/input';
import { Field, FieldLabel } from '@/components/Shadcn/field';
<Field>
<FieldLabel htmlFor="club">Club name</FieldLabel>
<Input id="club" placeholder="CSU ASE București" />
</Field>Basic inputs
Standard text fields, selection controls, and field layout patterns.
Text input
Single-line text fields for names, emails, and short values.
Default
<Input placeholder="Club name" />Disabled
<Input placeholder="Club name" disabled />Error
<Input aria-invalid defaultValue="Invalid value" />Textarea
Multi-line fields for descriptions and longer content.
Default
<Textarea placeholder="Club description" />Disabled
<Textarea placeholder="Club description" disabled />Error
<Textarea aria-invalid defaultValue="Invalid description" />Select
Dropdown selection for statuses, categories, and filters.
Default
<Select>
<SelectTrigger className="w-full">
<SelectValue placeholder="Enrollment status" />
</SelectTrigger>
<SelectContent>
<SelectItem value="open">Open</SelectItem>
<SelectItem value="closed">Closed</SelectItem>
</SelectContent>
</Select>Disabled
<Select disabled>
<SelectTrigger className="w-full">
<SelectValue placeholder="Enrollment status" />
</SelectTrigger>
</Select>Error
<Select defaultValue="open">
<SelectTrigger className="w-full" aria-invalid>
<SelectValue placeholder="Enrollment status" />
</SelectTrigger>
<SelectContent>
<SelectItem value="open">Open</SelectItem>
<SelectItem value="closed">Closed</SelectItem>
</SelectContent>
</Select>Checkbox
Boolean control for terms, preferences, and toggles.
Default
<div className="flex items-center gap-2">
<Checkbox id="terms" />
<Label htmlFor="terms">Accept terms</Label>
</div>Disabled
<div className="flex items-center gap-2">
<Checkbox id="terms" disabled />
<Label htmlFor="terms">Accept terms</Label>
</div>Error
<div className="flex items-center gap-2">
<Checkbox id="terms" aria-invalid />
<Label htmlFor="terms">Accept terms</Label>
</div>Radio
Single-choice control for roles, types, and exclusive options.
Default
<RadioGroup defaultValue="member">
<div className="flex items-center gap-2">
<RadioGroupItem value="member" id="member" />
<Label htmlFor="member">Member</Label>
</div>
<div className="flex items-center gap-2">
<RadioGroupItem value="guest" id="guest" />
<Label htmlFor="guest">Guest</Label>
</div>
</RadioGroup>Disabled
<RadioGroup defaultValue="member" disabled>
<div className="flex items-center gap-2">
<RadioGroupItem value="member" id="member" />
<Label htmlFor="member">Member</Label>
</div>
</RadioGroup>Error
<RadioGroup defaultValue="member">
<div className="flex items-center gap-2">
<RadioGroupItem value="member" id="member" aria-invalid />
<Label htmlFor="member">Member</Label>
</div>
</RadioGroup>Field layout
Label, description, and error text composed with the Field component.
With label
<Field>
<FieldLabel htmlFor="email">Email</FieldLabel>
<Input id="email" type="email" placeholder="name@club.ro" />
</Field>Official federation player identifier.
With description
<Field>
<FieldLabel htmlFor="fide-id">FIDE ID</FieldLabel>
<Input id="fide-id" placeholder="1503014" />
<FieldDescription>Official federation player identifier.</FieldDescription>
</Field>With error
<Field data-invalid="true">
<FieldLabel htmlFor="email-error">Email</FieldLabel>
<Input id="email-error" aria-invalid defaultValue="invalid" />
<FieldError>Enter a valid email address.</FieldError>
</Field>Advanced inputs
Specialized controls for search, dates, numbers, phone, and file upload.
Combobox
Multi-select combobox for categories, tags, and filter chips.
Default
import { Combobox } from '@/components/Fields';
<Combobox
multiple
items={categories}
placeholder="Add categories..."
value={selected}
onChange={setSelected}
/>Disabled
<Combobox
multiple
disabled
items={categories}
placeholder="Add categories..."
value={selected}
onChange={setSelected}
/>Error
<Combobox
multiple
aria-invalid
items={categories}
placeholder="Add categories..."
value={selected}
onChange={setSelected}
/>Number field
Increment and decrement controls for ratings, counts, and limits.
Default
import { Number } from '@/components/Fields';
<Number defaultValue={1500} min={0} max={3000} />Disabled
<Number defaultValue={1500} min={0} max={3000} disabled />Error
<NumberField defaultValue={1500} min={0} max={3000}>
<NumberFieldGroup>
<NumberFieldDecrement />
<NumberFieldInput aria-invalid />
<NumberFieldIncrement />
</NumberFieldGroup>
</NumberField>Date picker
Calendar popover for tournament dates, deadlines, and scheduling.
Default
import { DatePicker } from '@/components/Fields';
const [date, setDate] = useState(null);
<DatePicker value={date} onChange={setDate} />Disabled
<DatePicker value={date} onChange={setDate} disabled />Error
<DatePicker value={date} onChange={setDate} aria-invalid />Range
import { DateRangePicker } from '@/components/Fields';
const [dateRange, setDateRange] = useState(null);
<DateRangePicker value={dateRange} onChange={setDateRange} />Range disabled
<DateRangePicker value={dateRange} onChange={setDateRange} disabled />Range error
<DateRangePicker value={dateRange} onChange={setDateRange} aria-invalid />Time picker
Time input for round start times, meetings, and appointments.
Default
import { TimePicker } from '@/components/Fields';
const [time, setTime] = useState('');
<TimePicker value={time} onChange={setTime} />Disabled
<TimePicker value={time} onChange={setTime} disabled />Error
<TimePicker value={time} onChange={setTime} aria-invalid />Range
import { TimeRangePicker } from '@/components/Fields';
const [timeRange, setTimeRange] = useState({ from: '', to: '' });
<TimeRangePicker value={timeRange} onChange={setTimeRange} />Range disabled
<TimeRangePicker value={timeRange} onChange={setTimeRange} disabled />Range error
<TimeRangePicker value={timeRange} onChange={setTimeRange} aria-invalid />Phone input
International phone number field with country selector.
Default
import { PhoneInput } from '@/components/Shadcn/phone-input';
<PhoneInput
value={phone}
onChange={setPhone}
defaultCountry="RO"
placeholder="Enter phone number"
/>Disabled
<PhoneInput
value={phone}
onChange={setPhone}
defaultCountry="RO"
placeholder="Enter phone number"
disabled
/>Error
<PhoneInput
value={phone}
onChange={setPhone}
defaultCountry="RO"
placeholder="Enter phone number"
aria-invalid
/>File upload
Drag-and-drop upload with progress, file list, and validation.
Upload your files
Drag and drop files here or click to browse
Support for multiple file types up to 10MB each
Default
import { FileUpload } from '@/components/FileUpload';
<FileUpload
maxFiles={5}
maxSize={10 * 1024 * 1024}
accept="image/*,.pdf"
onFilesChange={setFiles}
/>Upload your files
Drag and drop files here or click to browse
Support for multiple file types up to 10MB each
Disabled
<FileUpload
maxFiles={5}
maxSize={10 * 1024 * 1024}
accept="image/*,.pdf"
disabled
/>Upload your files
Drag and drop files here or click to browse
Support for multiple file types up to 10MB each
Error
<FileUpload
maxFiles={5}
maxSize={10 * 1024 * 1024}
accept="image/*,.pdf"
aria-invalid
/>