> ## Documentation Index
> Fetch the complete documentation index at: https://blacksilva.com/silva-ui/llms.txt
> Use this file to discover all available pages before exploring further.

# Forms and controls

> Compose accessible inputs, labels, fields and selection controls.

# Forms and controls

Form components render native elements, then layer the Silva visual system on top. Pair labels with matching `id` values for accessible controls.

## Field composition

`Form` is a vertical form wrapper. `Field` groups a control with `error` or `helperText`; its `FieldError` and `FieldHelper` exports are available for custom layouts.

> [tab] Preview
>
> [Rendered Silva UI preview](https://black-silva.github.io/silva-ui/previews/?example=forms-1)

> [tab] Code
>
> ```tsx theme={null}
> <Form action="/subscribe" method="post" gap="medium">
>   <Field helperText="We will only send product updates.">
>     <Label htmlFor="email" required>Email address</Label>
>     <Input id="email" name="email" type="email" placeholder="you@example.com" required />
>   </Field>
>   <Button type="submit">Subscribe</Button>
> </Form>
> ```

## Inputs

`Input`, `TextArea`, and `Label` support `sm`, `md` and `lg` sizes. Inputs expose the standard native fields such as `name`, `value`, `defaultValue`, `disabled`, `required`, and `onChange`.

> [tab] Preview
>
> [Rendered Silva UI preview](https://black-silva.github.io/silva-ui/previews/?example=forms-2)

> [tab] Code
>
> ```tsx theme={null}
> <Field>
>   <Label htmlFor="message">Message</Label>
>   <TextArea id="message" rows={5} placeholder="Tell us what you need." />
> </Field>
> ```

## Select

`Select` accepts native `<option>` children and provides an accessible trigger, keyboard navigation, and a listbox of choices.

> [tab] Preview
>
> [Rendered select preview](https://black-silva.github.io/silva-ui/previews/?example=forms-5)

> [tab] Code
>
> ```tsx theme={null}
> <Field>
>   <Label htmlFor="workspace">Workspace</Label>
>   <Select id="workspace" name="workspace" defaultValue="silva-ui">
>     <option value="silva-ui">Silva UI</option>
>     <option value="blacksilva">BlackSilva</option>
>     <option value="hono-jsx">Hono JSX</option>
>   </Select>
> </Field>
> ```

## Choice controls

| Component | Key props | |
| - | - | - |
| `Checkbox` | `checked`, `defaultChecked`, `disabled`, `name`, `value` | |
| `RadioGroup` / `RadioGroupItem` | group `name`; item `value`, `checked`, `defaultChecked` | |
| `Switch` | `checked`, `defaultChecked`, `disabled` | |
| `ToggleGroup` / `ToggleGroupItem` | group \`type="single" | "multiple"`; item `value`, `data-active\` |
| `Slider` | `min`, `max`, `step`, `value`, `defaultValue` | |
| `Progress` | `value`, `max`, `aria-label` | |

> [tab] Preview
>
> [Rendered Silva UI preview](https://black-silva.github.io/silva-ui/previews/?example=forms-3)

> [tab] Code
>
> ```tsx theme={null}
> <YStack gap="medium">
>   <Checkbox name="terms" value="accepted">I agree to the terms</Checkbox>
>   <Switch name="alerts" defaultChecked>Enable alerts</Switch>
>   <RadioGroup name="plan" defaultValue="pro">
>     <RadioGroupItem value="starter">Starter</RadioGroupItem>
>     <RadioGroupItem value="pro">Pro</RadioGroupItem>
>   </RadioGroup>
>   <Progress value={72} max={100} aria-label="Profile completeness" />
> </YStack>
> ```

## Switch

`Switch` is a labelled native checkbox with `role="switch"`. Use `checked` for controlled state or `defaultChecked` for an initial value.

> [tab] Preview
>
> [Rendered switch preview](https://black-silva.github.io/silva-ui/previews/?example=forms-6)

> [tab] Code
>
> ```tsx theme={null}
> <Switch name="updates" defaultChecked>
>   Enable product updates
> </Switch>
> ```

## Slider

`Slider` renders a native range input with `min`, `max`, `step`, `value`, and `defaultValue` support.

> [tab] Preview
>
> [Rendered slider preview](https://black-silva.github.io/silva-ui/previews/?example=forms-7)

> [tab] Code
>
> ```tsx theme={null}
> <Field>
>   <Label htmlFor="volume">Volume</Label>
>   <Slider id="volume" name="volume" min={0} max={100} step={1} defaultValue={64} />
> </Field>
> ```

## Toggle group

`ToggleGroup` groups related toggle buttons. Apply `data-active` from your application state to the selected `ToggleGroupItem`.

> [tab] Preview
>
> [Rendered toggle group preview](https://black-silva.github.io/silva-ui/previews/?example=forms-8)

> [tab] Code
>
> ```tsx theme={null}
> <ToggleGroup type="single" aria-label="View mode">
>   <ToggleGroupItem value="grid" data-active>Grid</ToggleGroupItem>
>   <ToggleGroupItem value="list">List</ToggleGroupItem>
>   <ToggleGroupItem value="compact">Compact</ToggleGroupItem>
> </ToggleGroup>
> ```

## Buttons

`Button` supports `xs` through `xl` sizes and `solid`, `outline`, `ghost`, and `link` variants.

> [tab] Preview
>
> [Rendered Silva UI preview](https://black-silva.github.io/silva-ui/previews/?example=forms-4)

> [tab] Code
>
> ```tsx theme={null}
> <XStack gap="small">
>   <Button>Save changes</Button>
>   <Button variant="outline">Preview</Button>
>   <Button variant="ghost">Cancel</Button>
> </XStack>
> ```


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