Radio Group

import {
  Field,
  FieldContent,
  FieldDescription,
  FieldLabel,
  FieldLegend,
  FieldSet,
} from '@/components/ui/field'
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'

export function RadioGroupWithDescription() {
  return (
    <FieldSet className="w-full max-w-sm">
      <FieldLegend variant="label">Collection frequency</FieldLegend>
      <FieldDescription>Applies to the residual waste bin at Kungsgatan 3.</FieldDescription>
      <RadioGroup defaultValue="biweekly">
        <Field orientation="horizontal">
          <RadioGroupItem value="weekly" id="frequency-weekly" />
          <FieldContent>
            <FieldLabel htmlFor="frequency-weekly">Every week</FieldLabel>
            <FieldDescription>2 140 kr per year. Recommended for households of five or more.</FieldDescription>
          </FieldContent>
        </Field>
        <Field orientation="horizontal">
          <RadioGroupItem value="biweekly" id="frequency-biweekly" />
          <FieldContent>
            <FieldLabel htmlFor="frequency-biweekly">Every other week</FieldLabel>
            <FieldDescription>1 260 kr per year. The most common choice.</FieldDescription>
          </FieldContent>
        </Field>
        <Field orientation="horizontal">
          <RadioGroupItem value="monthly" id="frequency-monthly" />
          <FieldContent>
            <FieldLabel htmlFor="frequency-monthly">Every four weeks</FieldLabel>
            <FieldDescription>780 kr per year. Requires that you compost food waste at home.</FieldDescription>
          </FieldContent>
        </Field>
      </RadioGroup>
    </FieldSet>
  )
}

import { Badge } from '@/components/ui/badge'
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldLabel,
  FieldLegend,
  FieldSet,
  FieldTitle,
} from '@/components/ui/field'
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'

const permits = [
  {
    value: 'resident',
    title: 'Resident parking',
    description: 'Park in your own zone near home.',
    price: '450 kr/month',
  },
  {
    value: 'business',
    title: 'Business parking',
    description: 'For company vehicles in the city centre.',
    price: '1 100 kr/month',
  },
  { value: 'disabled', title: 'Disabled parking', description: 'Park closer to your destination.', price: 'Free' },
]

export function RadioGroupChoiceCard() {
  return (
    <FieldSet className="w-full max-w-sm">
      <FieldLegend variant="label">Permit type</FieldLegend>
      <RadioGroup defaultValue="resident">
        {permits.map((permit) => (
          <FieldLabel key={permit.value} htmlFor={`permit-${permit.value}`}>
            <Field orientation="horizontal">
              <RadioGroupItem value={permit.value} id={`permit-${permit.value}`} />
              <FieldContent>
                <FieldTitle>{permit.title}</FieldTitle>
                <FieldDescription>{permit.description}</FieldDescription>
              </FieldContent>
              <Badge variant="outline">{permit.price}</Badge>
            </Field>
          </FieldLabel>
        ))}
      </RadioGroup>
    </FieldSet>
  )
}

import { FieldLegend, FieldSet } from '@/components/ui/field'
import { Label } from '@/components/ui/label'
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'

export function RadioGroupHorizontal() {
  return (
    <FieldSet className="w-fit">
      <FieldLegend variant="label">Did you get the help you needed?</FieldLegend>
      <RadioGroup defaultValue="yes" className="flex flex-wrap gap-6">
        {[
          ['yes', 'Yes'],
          ['partly', 'Partly'],
          ['no', 'No'],
        ].map(([value, label]) => (
          <div key={value} className="flex items-center gap-2">
            <RadioGroupItem value={value} id={`horizontal-${value}`} />
            <Label htmlFor={`horizontal-${value}`} className="font-normal">
              {label}
            </Label>
          </div>
        ))}
      </RadioGroup>
    </FieldSet>
  )
}

import {
  Field,
  FieldContent,
  FieldDescription,
  FieldLabel,
  FieldLegend,
  FieldSet,
} from '@/components/ui/field'
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'

export function RadioGroupDisabled() {
  return (
    <FieldSet className="w-full max-w-xs">
      <FieldLegend variant="label">Meeting format</FieldLegend>
      <RadioGroup defaultValue="in-person">
        <Field orientation="horizontal">
          <RadioGroupItem value="in-person" id="disabled-in-person" />
          <FieldLabel htmlFor="disabled-in-person" className="font-normal">
            In person at City Hall
          </FieldLabel>
        </Field>
        <Field orientation="horizontal">
          <RadioGroupItem value="phone" id="disabled-phone" />
          <FieldLabel htmlFor="disabled-phone" className="font-normal">
            Phone call
          </FieldLabel>
        </Field>
        <Field orientation="horizontal" data-disabled="true">
          <RadioGroupItem value="video" id="disabled-video" disabled />
          <FieldContent>
            <FieldLabel htmlFor="disabled-video" className="font-normal">
              Video meeting
            </FieldLabel>
            <FieldDescription>Not available for home help assessments.</FieldDescription>
          </FieldContent>
        </Field>
      </RadioGroup>
    </FieldSet>
  )
}

import { Field, FieldDescription, FieldLabel, FieldLegend, FieldSet } from '@/components/ui/field'
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'

export function RadioGroupReadOnly() {
  return (
    <FieldSet className="w-full max-w-xs">
      <FieldLegend variant="label">Care level</FieldLegend>
      <FieldDescription>Decided on 3 March 2026 by Mikko Virtanen, care manager.</FieldDescription>
      <RadioGroup defaultValue="daily" readOnly>
        <Field orientation="horizontal">
          <RadioGroupItem value="weekly" id="read-only-weekly" />
          <FieldLabel htmlFor="read-only-weekly" className="font-normal">
            Weekly visits
          </FieldLabel>
        </Field>
        <Field orientation="horizontal">
          <RadioGroupItem value="daily" id="read-only-daily" />
          <FieldLabel htmlFor="read-only-daily" className="font-normal">
            Daily visits
          </FieldLabel>
        </Field>
        <Field orientation="horizontal">
          <RadioGroupItem value="round-the-clock" id="read-only-round-the-clock" />
          <FieldLabel htmlFor="read-only-round-the-clock" className="font-normal">
            Round-the-clock care
          </FieldLabel>
        </Field>
      </RadioGroup>
    </FieldSet>
  )
}

import { Field, FieldError, FieldLabel, FieldLegend, FieldSet } from '@/components/ui/field'
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'

export function RadioGroupInvalid() {
  return (
    <FieldSet className="w-full max-w-xs" data-invalid="true">
      <FieldLegend variant="label">Are you the property owner?</FieldLegend>
      <RadioGroup required aria-describedby="invalid-owner-error">
        <Field orientation="horizontal" data-invalid="true">
          <RadioGroupItem value="yes" id="invalid-yes" aria-invalid />
          <FieldLabel htmlFor="invalid-yes" className="font-normal">
            Yes, I own the property
          </FieldLabel>
        </Field>
        <Field orientation="horizontal" data-invalid="true">
          <RadioGroupItem value="no" id="invalid-no" aria-invalid />
          <FieldLabel htmlFor="invalid-no" className="font-normal">
            No, I apply on behalf of the owner
          </FieldLabel>
        </Field>
      </RadioGroup>
      <FieldError id="invalid-owner-error">Answer this question to continue with the building permit.</FieldError>
    </FieldSet>
  )
}