Form Components

import {
  Input,
  Select,
  Textarea,
  Label,
  Checkbox,
  Radio,
  Switch,
  Slider,
} from 'theme-ui'

<Input placeholder="Enter text" />

{/* Basic input */}
<Input placeholder="Your name" />

{/* Email input */}
<Input type="email" placeholder="email@example.com" />

{/* With label */}
<Label>
  Email
  <Input type="email" />
</Label>

{/* Custom styling */}
<Input
  sx={{
    borderColor: 'primary',
    '&:focus': {
      borderColor: 'secondary',
      outline: 'none',
    },
  }}
/>

<Select>
  <option>Option 1</option>
  <option>Option 2</option>
</Select>

{/* Basic select */}
<Select>
  <option>Choose one</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</Select>

{/* With label */}
<Label>
  Country
  <Select>
    <option>United States</option>
    <option>Canada</option>
    <option>Mexico</option>
  </Select>
</Label>

<Textarea placeholder="Enter longer text" />

{/* Basic textarea */}
<Textarea placeholder="Your message" />

{/* With label */}
<Label>
  Message
  <Textarea rows={4} />
</Label>

{/* Custom height */}
<Textarea sx={{ minHeight: 200 }} />

<Label>
  Field Name
  <Input />
</Label>

{/* Wrapping input */}
<Label>
  Username
  <Input />
</Label>

{/* Using htmlFor */}
<Label htmlFor="email">Email Address</Label>
<Input id="email" type="email" />

{/* Inline label */}
<Label sx={{ display: 'inline-flex', alignItems: 'center' }}>
  <Checkbox />
  I agree to terms
</Label>

<Label>
  <Checkbox />
  Accept terms
</Label>

{/* Basic checkbox */}
<Label>
  <Checkbox /> Subscribe to newsletter
</Label>

{/* Controlled checkbox */}
<Label>
  <Checkbox checked={isChecked} onChange={e => setIsChecked(e.target.checked)} />
  Toggle me
</Label>

{/* Multiple checkboxes */}
<Box>
  <Label><Checkbox /> Option 1</Label>
  <Label><Checkbox /> Option 2</Label>
  <Label><Checkbox /> Option 3</Label>
</Box>

<Label>
  <Radio name="group" />
  Option 1
</Label>

{/* Radio group */}
<Box>
  <Label>
    <Radio name="plan" value="basic" />
    Basic Plan
  </Label>
  <Label>
    <Radio name="plan" value="pro" />
    Pro Plan
  </Label>
  <Label>
    <Radio name="plan" value="enterprise" />
    Enterprise
  </Label>
</Box>

{/* Controlled radio */}
<Label>
  <Radio
    name="size"
    value="large"
    checked={size === 'large'}
    onChange={e => setSize(e.target.value)}
  />
  Large
</Label>

<Switch label="Enable notifications" />

{/* Basic switch */}
<Switch label="Enable feature" />

{/* Controlled switch */}
<Switch
  label="Dark mode"
  checked={darkMode}
  onChange={e => setDarkMode(e.target.checked)}
/>

{/* Disabled switch */}
<Switch label="Feature disabled" disabled />

<Slider />

{/* Basic slider */}
<Label>
  Volume
  <Slider />
</Label>

{/* Custom range */}
<Slider min={0} max={10} step={0.5} />

{/* Controlled slider */}
<Box>
  <Label>Brightness: {brightness}%</Label>
  <Slider
    value={brightness}
    onChange={e => setBrightness(e.target.value)}
  />
</Box>

{/* With display value */}
<Box>
  <Flex sx={{ justifyContent: 'space-between', mb: 2 }}>
    <Text>Price</Text>
    <Text>${price}</Text>
  </Flex>
  <Slider
    min={0}
    max={1000}
    value={price}
    onChange={e => setPrice(e.target.value)}
  />
</Box>

<Box as="form" onSubmit={handleSubmit}>
  <Label htmlFor="name">
    Name
    <Input id="name" name="name" required />
  </Label>
  
  <Label htmlFor="email">
    Email
    <Input id="email" name="email" type="email" required />
  </Label>
  
  <Label htmlFor="country">
    Country
    <Select id="country" name="country">
      <option>United States</option>
      <option>Canada</option>
      <option>Other</option>
    </Select>
  </Label>
  
  <Label htmlFor="message">
    Message
    <Textarea id="message" name="message" rows={4} />
  </Label>
  
  <Label>
    <Checkbox name="newsletter" />
    Subscribe to newsletter
  </Label>
  
  <Label>
    <Switch label="Send me updates" name="updates" />
  </Label>
  
  <Button type="submit">Submit</Button>
</Box>