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.

Preview
Code

<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.

Preview
Code

<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.

Preview
Code

<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`

Preview
Code

<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.

Preview
Code

<Switch name="updates" defaultChecked>
  Enable product updates
</Switch>

Slider

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

Preview
Code

<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.

Preview
Code

<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.

Preview
Code

<XStack gap="small">
  <Button>Save changes</Button>
  <Button variant="outline">Preview</Button>
  <Button variant="ghost">Cancel</Button>
</XStack>

Get started

Foundations

Components

Reference

Forms and controls

Forms and controls

Field composition

Inputs

Select

Choice controls

Switch

Slider

Toggle group

Buttons

​Forms and controls

​Field composition

​Inputs

​Select

​Choice controls

​Switch

​Slider

​Toggle group

​Buttons

Forms and controls

Field composition

Inputs

Select

Choice controls

Switch

Slider

Toggle group

Buttons