Forms

import { Input, Textarea } from '@cskn/ui';

<Input label="Title" value={title} onChange={(e) => setTitle(e.target.value)} />
<Input label="Email" type="email" error={emailError} />
<Textarea label="Notes" hint="Optional" rows={4} />

import { Field, SegmentedControl } from '@cskn/ui';

<Field label="Status" hint="Visible to followers">
  <SegmentedControl options={statusOptions} value={status} onChange={setStatus} />
</Field>

import { SearchInput } from '@cskn/ui';

<SearchInput value={query} onChange={setQuery} onSearch={runSearch} placeholder="Search films…" />

import { Checkbox, Switch, RadioGroup } from '@cskn/ui';

<Checkbox checked={firstEdition} onChange={setFirstEdition} label="First edition" />
<Switch checked={notify} onChange={setNotify} aria-label="Notifications" />
<RadioGroup
  value={format}
  onChange={setFormat}
  horizontal
  options={[
    { value: 'pb', label: 'Paperback' },
    { value: 'hc', label: 'Hardcover' },
  ]}
/>

import { SegmentedControl } from '@cskn/ui';

<SegmentedControl
  options={[{ value: 'all', label: 'All' }, { value: 'unread', label: 'Unread' }]}
  value={tab}
  onChange={setTab}
/>

import { Select } from '@cskn/ui';

<Select
  label="Genre"
  value={genre}
  onChange={setGenre}
  placeholder="Choose a genre"
  options={[{ value: 'scifi', label: 'Sci-fi' }, { value: 'drama', label: 'Drama' }]}
/>

import { Slider } from '@cskn/ui';

<Slider value={volume} onChange={setVolume} min={0} max={100} step={1} />

import { DatePicker } from '@cskn/ui';

<DatePicker label="Watched on" value={date} onChange={setDate} />
<DatePicker mode="datetime" value={startsAt} onChange={setStartsAt} />

import { FilePicker } from '@cskn/ui';

<FilePicker accept="image/*" multiple hint="PNG or JPG" onSelect={(files) => upload(files)} />

<FilePicker accept=".pdf" onSelect={([file]) => attach(file)}>
  <Button variant="outline">Attach a PDF</Button>
</FilePicker>