> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cskn.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Forms

> Inputs, selection controls, date and file pickers.

All form controls are reachable by keyboard and TV remote, and take their colors from the theme.

## Input and Textarea

```tsx theme={null}
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} />
```

Both accept every native attribute of `input` / `textarea`, plus:

<ParamField path="label" type="ReactNode">Label above the control.</ParamField>
<ParamField path="hint" type="ReactNode">Helper text below it.</ParamField>
<ParamField path="error" type="ReactNode">Error text; also colors the helper line.</ParamField>

`Textarea` defaults to `rows={4}`. Both forward refs.

## Field

Adds a label, hint and error to any control.

```tsx theme={null}
import { Field, SegmentedControl } from '@cskn/ui';

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

## SearchInput

```tsx theme={null}
import { SearchInput } from '@cskn/ui';

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

<ParamField path="value" type="string" required>Current text.</ParamField>
<ParamField path="onChange" type="(value: string) => void" required>Receives the new text, not an event.</ParamField>
<ParamField path="onSearch" type="() => void">Called on Enter.</ParamField>
<ParamField path="onClear" type="() => void">Called by the clear button. Defaults to clearing the value.</ParamField>

## Checkbox, Switch, RadioGroup

```tsx theme={null}
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' },
  ]}
/>
```

| Component | Key props |
| - | - |
| `Checkbox` | `checked`, `onChange(checked)`, `label?`, `disabled?` |
| `Switch` | `checked`, `onChange(checked)`, `disabled?`, `haptic?` (default `true`), `aria-label` |
| `RadioGroup` | `options: { value, label, disabled? }[]`, `value`, `onChange(value)`, `horizontal?`, `disabled?` |

`onChange` receives the value directly, not an event.

## SegmentedControl

```tsx theme={null}
import { SegmentedControl } from '@cskn/ui';

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

Takes `options`, `value`, `onChange` and `haptic?` (default `true`).

## Select

Built on the native `select`, so on mobile it opens the operating system's picker, which is what users expect in an app. For a fully custom menu, use [`Menu`](/ui/components/overlays#menu).

```tsx theme={null}
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' }]}
/>
```

Props: `options: { value, label, disabled? }[]`, `value`, `onChange(value)`, `placeholder?`, `label?`, `hint?`, `error?`, plus native `select` attributes.

## Slider

```tsx theme={null}
import { Slider } from '@cskn/ui';

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

A native range input tinted with the theme's primary color.

## DatePicker

Native date and time inputs, so mobile users get the OS calendar.

```tsx theme={null}
import { DatePicker } from '@cskn/ui';

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

<ParamField path="value" type="string" required>ISO text: `YYYY-MM-DD` for `date`, `YYYY-MM-DDTHH:mm` for `datetime`, `HH:mm` for `time`.</ParamField>
<ParamField path="onChange" type="(value: string) => void" required>Receives the ISO text.</ParamField>
<ParamField path="mode" type="'date' | 'datetime' | 'time'" default="'date'">What to pick.</ParamField>
<ParamField path="label / hint / error" type="ReactNode">Field chrome.</ParamField>

## FilePicker

A drop zone that also opens the file dialog on click.

```tsx theme={null}
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>
```

<ParamField path="onSelect" type="(files: File[]) => void" required>Receives the chosen files.</ParamField>
<ParamField path="accept" type="string">For example `image/*` or `.pdf,.epub`.</ParamField>
<ParamField path="multiple" type="boolean">Allow several files.</ParamField>
<ParamField path="label / hint" type="ReactNode">Drop zone text.</ParamField>
<ParamField path="children" type="ReactNode">A custom trigger that replaces the drop zone. Drag and drop is only on the default drop zone.</ParamField>

To upload an image after picking it, see [`uploadImage`](/sdk/uploads).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.