Toggle Group

import { ToggleGroup, ToggleGroupItem } from 'ferry-ui'

export default function ToggleGroupHero() {
  return (
    <ToggleGroup type="single" variant="outline" defaultValue="30" aria-label="Period of the report">
      <ToggleGroupItem value="7">7 days</ToggleGroupItem>
      <ToggleGroupItem value="30">30 days</ToggleGroupItem>
      <ToggleGroupItem value="90">90 days</ToggleGroupItem>
    </ToggleGroup>
  )
}

import * as React from 'react'
import { ToggleGroup, ToggleGroupItem } from 'ferry-ui'
import { Bold, Italic, Underline } from 'lucide-react'

export default function ToggleGroupMultiple() {
  const [formats, setFormats] = React.useState(['bold'])

  return (
    <div className="flex flex-col items-center gap-3">
      <ToggleGroup type="multiple" variant="outline" aria-label="Text format" value={formats} onValueChange={setFormats}>
        <ToggleGroupItem value="bold" aria-label="Bold">
          <Bold />
        </ToggleGroupItem>
        <ToggleGroupItem value="italic" aria-label="Italic">
          <Italic />
        </ToggleGroupItem>
        <ToggleGroupItem value="underline" aria-label="Underline">
          <Underline />
        </ToggleGroupItem>
      </ToggleGroup>
      <p className="font-mono text-xs text-foreground-lighter">value: {JSON.stringify(formats)}</p>
    </div>
  )
}

import * as React from 'react'
import { ToggleGroup, ToggleGroupItem } from 'ferry-ui'
import { LayoutGrid, List } from 'lucide-react'

const PROJECTS = ['Customer portal', 'Marketing site', 'Mobile app', 'Billing portal']

export default function ToggleGroupRequired() {
  const [view, setView] = React.useState('grid')

  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <ToggleGroup
        type="single"
        variant="outline"
        aria-label="View"
        value={view}
        // A click on the pressed item sends "". Ignore it to keep one item pressed.
        onValueChange={(next) => next && setView(next)}
      >
        <ToggleGroupItem value="grid" aria-label="Grid view">
          <LayoutGrid />
        </ToggleGroupItem>
        <ToggleGroupItem value="list" aria-label="List view">
          <List />
        </ToggleGroupItem>
      </ToggleGroup>
      <ul className={view === 'grid' ? 'grid grid-cols-2 gap-2' : 'flex flex-col gap-2'}>
        {PROJECTS.map((project) => (
          <li key={project} className="rounded-md border bg-surface-100 px-3 py-2 text-[13px] text-foreground">
            {project}
          </li>
        ))}
      </ul>
    </div>
  )
}

import { ToggleGroup, ToggleGroupItem } from 'ferry-ui'

export default function ToggleGroupVariants() {
  return (
    <>
      <ToggleGroup type="single" defaultValue="month" aria-label="Billing period, default variant">
        <ToggleGroupItem value="month">Monthly</ToggleGroupItem>
        <ToggleGroupItem value="year">Yearly</ToggleGroupItem>
      </ToggleGroup>
      <ToggleGroup type="single" variant="outline" defaultValue="month" aria-label="Billing period, outline variant">
        <ToggleGroupItem value="month">Monthly</ToggleGroupItem>
        <ToggleGroupItem value="year">Yearly</ToggleGroupItem>
      </ToggleGroup>
    </>
  )
}

import { ToggleGroup, ToggleGroupItem } from 'ferry-ui'

const SIZES = ['tiny', 'sm', 'md'] as const

export default function ToggleGroupSizes() {
  return (
    <>
      {SIZES.map((size) => (
        <ToggleGroup key={size} type="single" variant="outline" size={size} defaultValue="grid" aria-label={`View, size ${size}`}>
          <ToggleGroupItem value="grid">Grid</ToggleGroupItem>
          <ToggleGroupItem value="list">List</ToggleGroupItem>
        </ToggleGroup>
      ))}
    </>
  )
}

import { ToggleGroup, ToggleGroupItem } from 'ferry-ui'

export default function ToggleGroupSpacing() {
  return (
    <ToggleGroup type="multiple" variant="outline" spacing={2} defaultValue={['email']} aria-label="Notification channels">
      <ToggleGroupItem value="email">Email</ToggleGroupItem>
      <ToggleGroupItem value="sms">SMS</ToggleGroupItem>
      <ToggleGroupItem value="push">Push</ToggleGroupItem>
    </ToggleGroup>
  )
}

import { ToggleGroup, ToggleGroupItem } from 'ferry-ui'

export default function ToggleGroupDisabled() {
  return (
    <>
      <ToggleGroup type="single" variant="outline" defaultValue="month" aria-label="Billing period">
        <ToggleGroupItem value="month">Monthly</ToggleGroupItem>
        <ToggleGroupItem value="year">Yearly</ToggleGroupItem>
        <ToggleGroupItem value="lifetime" disabled>
          Lifetime
        </ToggleGroupItem>
      </ToggleGroup>
      <ToggleGroup type="single" variant="outline" defaultValue="month" disabled aria-label="Billing period, disabled">
        <ToggleGroupItem value="month">Monthly</ToggleGroupItem>
        <ToggleGroupItem value="year">Yearly</ToggleGroupItem>
      </ToggleGroup>
    </>
  )
}

import { Field, ToggleGroup, ToggleGroupItem } from 'ferry-ui'
import { Monitor, Moon, Sun } from 'lucide-react'

export default function ToggleGroupField() {
  return (
    <Field label="Theme" labelAs="span" hint="The system option follows the theme of the device.">
      <ToggleGroup type="single" variant="outline" defaultValue="system">
        <ToggleGroupItem value="light">
          <Sun /> Light
        </ToggleGroupItem>
        <ToggleGroupItem value="dark">
          <Moon /> Dark
        </ToggleGroupItem>
        <ToggleGroupItem value="system">
          <Monitor /> System
        </ToggleGroupItem>
      </ToggleGroup>
    </Field>
  )
}