Switch

import { FormCard, FormRow, Switch } from 'ferry-ui'

export default function SwitchHero() {
  return (
    <FormCard asDiv title="Notifications">
      <FormRow
        label="Invoice emails"
        description="Send a copy of each invoice to the billing contact."
        htmlFor="invoice-emails"
      >
        <Switch defaultChecked />
      </FormRow>
      <FormRow label="Weekly digest" description="Send a summary of the activity each Monday." htmlFor="weekly-digest">
        <Switch />
      </FormRow>
    </FormCard>
  )
}

import { Label, Switch } from 'ferry-ui'

export default function SwitchLabel() {
  return (
    <div className="flex items-center gap-2">
      <Switch id="compact-sidebar" />
      <Label htmlFor="compact-sidebar">Compact sidebar</Label>
    </div>
  )
}

import { Label, Switch } from 'ferry-ui'

export default function SwitchSizes() {
  return (
    <div className="flex flex-col gap-3">
      <div className="flex items-center gap-2">
        <Switch id="switch-md" size="md" defaultChecked />
        <Label htmlFor="switch-md">Medium, 34 × 20px</Label>
      </div>
      <div className="flex items-center gap-2">
        <Switch id="switch-sm" size="sm" defaultChecked />
        <Label htmlFor="switch-sm">Small, 28 × 16px</Label>
      </div>
    </div>
  )
}

import { Label, Switch } from 'ferry-ui'

export default function SwitchDisabled() {
  return (
    <div className="flex flex-col gap-3">
      <div className="flex items-center gap-2">
        <Switch id="single-sign-on" disabled />
        <Label htmlFor="single-sign-on">Require single sign-on</Label>
      </div>
      <div className="flex items-center gap-2">
        <Switch id="audit-log" disabled defaultChecked />
        <Label htmlFor="audit-log">Keep an audit log</Label>
      </div>
    </div>
  )
}

import * as React from 'react'
import { Label, Switch, toast } from 'ferry-ui'

export default function SwitchControlled() {
  const [enabled, setEnabled] = React.useState(false)

  function change(checked: boolean) {
    setEnabled(checked)
    // A switch has no Save button: save the setting here.
    toast.success(checked ? 'Maintenance mode is on' : 'Maintenance mode is off')
  }

  return (
    <div className="flex items-center gap-2">
      <Switch id="maintenance-mode" checked={enabled} onCheckedChange={change} />
      <Label htmlFor="maintenance-mode">Maintenance mode</Label>
    </div>
  )
}

import { Switch, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from 'ferry-ui'

const API_KEYS = [
  { id: 'production', name: 'Production', created: 'Mar 4, 2026', enabled: true },
  { id: 'staging', name: 'Staging', created: 'Jan 12, 2026', enabled: true },
  { id: 'local', name: 'Local tests', created: 'Nov 30, 2025', enabled: false },
]

export default function SwitchTable() {
  return (
    <Table aria-label="API keys">
      <TableHeader>
        <TableRow className="hover:bg-transparent">
          <TableHead>Name</TableHead>
          <TableHead>Created</TableHead>
          <TableHead className="w-[1%]">Enabled</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {API_KEYS.map((key) => (
          <TableRow key={key.id}>
            <TableCell>{key.name}</TableCell>
            <TableCell>{key.created}</TableCell>
            <TableCell>
              <Switch size="sm" defaultChecked={key.enabled} aria-label={`Enable the ${key.name} key`} />
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}