Radio Group

import { Field, Label, RadioGroup, RadioGroupItem } from 'ferry-ui'

export default function RadioGroupHero() {
  return (
    <Field label="Billing period" labelAs="span" hint="The new period starts with the next invoice.">
      <RadioGroup defaultValue="monthly">
        <Label className="font-normal">
          <RadioGroupItem value="monthly" />
          Monthly
        </Label>
        <Label className="font-normal">
          <RadioGroupItem value="yearly" />
          Yearly, with two months free
        </Label>
      </RadioGroup>
    </Field>
  )
}

import { Label, RadioGroup, RadioGroupItem } from 'ferry-ui'

export default function RadioGroupRow() {
  return (
    <RadioGroup aria-label="Export format" defaultValue="csv" className="flex gap-4">
      <Label className="font-normal">
        <RadioGroupItem value="csv" />
        CSV
      </Label>
      <Label className="font-normal">
        <RadioGroupItem value="pdf" />
        PDF
      </Label>
      <Label className="font-normal">
        <RadioGroupItem value="json" />
        JSON
      </Label>
    </RadioGroup>
  )
}

import { Label, RadioGroup, RadioGroupItem } from 'ferry-ui'

const ROLES = [
  { value: 'viewer', label: 'Viewer', description: 'Sees the projects and the reports.' },
  { value: 'member', label: 'Member', description: 'Creates and edits the projects of the workspace.' },
  { value: 'admin', label: 'Admin', description: 'Has full access, with billing and members.' },
]

export default function RadioGroupDescriptions() {
  return (
    <RadioGroup aria-label="Role" defaultValue="member" className="max-w-sm gap-4">
      {ROLES.map((role) => (
        <div key={role.value} className="flex items-start gap-2.5">
          <RadioGroupItem
            value={role.value}
            id={`role-${role.value}`}
            aria-describedby={`role-${role.value}-hint`}
            className="mt-0.5"
          />
          <div className="flex flex-col gap-0.5">
            <Label htmlFor={`role-${role.value}`}>{role.label}</Label>
            <p id={`role-${role.value}-hint`} className="text-[13px] text-foreground-light">
              {role.description}
            </p>
          </div>
        </div>
      ))}
    </RadioGroup>
  )
}

import { Label, RadioGroup, RadioGroupItem } from 'ferry-ui'

export default function RadioGroupDisabled() {
  return (
    <RadioGroup aria-label="Billing period" defaultValue="monthly">
      <Label className="font-normal">
        <RadioGroupItem value="monthly" />
        Monthly
      </Label>
      <Label className="font-normal">
        <RadioGroupItem value="yearly" />
        Yearly
      </Label>
      <Label className="font-normal">
        <RadioGroupItem value="custom" disabled />
        Custom contract, on the Enterprise plan only
      </Label>
    </RadioGroup>
  )
}

import * as React from 'react'
import { Label, RadioGroup, RadioGroupItem } from 'ferry-ui'

const PLANS = [
  { value: 'starter', label: 'Starter', price: '$0' },
  { value: 'pro', label: 'Pro', price: '$29' },
  { value: 'team', label: 'Team', price: '$99' },
]

export default function RadioGroupControlled() {
  const [plan, setPlan] = React.useState('pro')
  const price = PLANS.find((item) => item.value === plan)?.price

  return (
    <div className="flex flex-col gap-4">
      <RadioGroup aria-label="Plan" value={plan} onValueChange={setPlan}>
        {PLANS.map((item) => (
          <Label key={item.value} className="font-normal">
            <RadioGroupItem value={item.value} />
            {item.label}
          </Label>
        ))}
      </RadioGroup>
      <p className="text-[13px] text-foreground-light">Price: {price} each month</p>
    </div>
  )
}

import * as React from 'react'
import { Button, Field, Label, RadioGroup, RadioGroupItem, toast } from 'ferry-ui'

const FORMATS = ['CSV', 'PDF', 'JSON']

export default function RadioGroupInvalid() {
  const [format, setFormat] = React.useState('')
  const [error, setError] = React.useState<string>()

  function submit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault()
    setError(format === '' ? 'Select an export format.' : undefined)
    if (format !== '') toast.success('Export started')
  }

  function change(value: string) {
    setFormat(value)
    setError(undefined)
  }

  return (
    <form noValidate onSubmit={submit} className="flex flex-col items-start gap-4">
      <Field label="Export the invoices as" labelAs="span" error={error}>
        <RadioGroup value={format} onValueChange={change} className="flex gap-4">
          {FORMATS.map((name) => (
            <Label key={name} className="font-normal">
              <RadioGroupItem value={name.toLowerCase()} aria-invalid={error ? true : undefined} />
              {name}
            </Label>
          ))}
        </RadioGroup>
      </Field>
      <Button type="submit">Export</Button>
    </form>
  )
}

import * as React from 'react'
import { Button, Field, Label, RadioGroup, RadioGroupItem } from 'ferry-ui'

export default function RadioGroupForm() {
  const [sent, setSent] = React.useState<string>()

  function submit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault()
    // The form holds one "visibility" entry: the value of the selected option.
    setSent(String(new FormData(event.currentTarget).get('visibility')))
  }

  return (
    <form onSubmit={submit} className="flex flex-col items-start gap-4">
      <Field label="Visibility of the project" labelAs="span">
        <RadioGroup name="visibility" defaultValue="private" required>
          <Label className="font-normal">
            <RadioGroupItem value="private" />
            Private
          </Label>
          <Label className="font-normal">
            <RadioGroupItem value="public" />
            Public
          </Label>
        </RadioGroup>
      </Field>
      <Button type="submit">Save</Button>
      <p role="status" className="text-[13px] text-foreground-light">
        {sent !== undefined && `The form sent: ${sent}`}
      </p>
    </form>
  )
}