Radio Group

import { Field, FieldLabel } from "@/components/ui/field"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

const frequencies = [
  { value: "realtime", label: "Na bieżąco" },
  { value: "daily", label: "Codzienne podsumowanie" },
  { value: "weekly", label: "Cotygodniowe podsumowanie" },
]

export default function RadioGroupDemo() {
  return (
    <RadioGroup
      defaultValue="daily"
      aria-label="Częstotliwość powiadomień"
      className="w-52"
    >
      {frequencies.map((frequency) => (
        <Field key={frequency.value} orientation="horizontal">
          <RadioGroupItem
            value={frequency.value}
            id={`frequency-${frequency.value}`}
          />
          <FieldLabel
            htmlFor={`frequency-${frequency.value}`}
            className="font-normal"
          >
            {frequency.label}
          </FieldLabel>
        </Field>
      ))}
    </RadioGroup>
  )
}

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

const visibility = [
  {
    value: "private",
    label: "Prywatny",
    description: "Tylko zaproszeni członkowie mogą zobaczyć ten projekt i do niego dołączyć.",
  },
  {
    value: "internal",
    label: "Wewnętrzny",
    description: "Każdy w twojej organizacji może go znaleźć i wyświetlić.",
  },
  {
    value: "public",
    label: "Publiczny",
    description: "Każdy w internecie może go wyświetlić. Edytować mogą tylko członkowie.",
  },
]

export default function RadioGroupDescriptions() {
  return (
    <RadioGroup
      defaultValue="internal"
      aria-label="Widoczność projektu"
      className="max-w-sm gap-4"
    >
      {visibility.map((option) => (
        <Field key={option.value} orientation="horizontal">
          <RadioGroupItem
            value={option.value}
            id={`visibility-${option.value}`}
          />
          <FieldContent>
            <FieldLabel htmlFor={`visibility-${option.value}`}>
              {option.label}
            </FieldLabel>
            <FieldDescription>{option.description}</FieldDescription>
          </FieldContent>
        </Field>
      ))}
    </RadioGroup>
  )
}

import {
  Field,
  FieldContent,
  FieldDescription,
  FieldLabel,
  FieldTitle,
} from "@/components/ui/field"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

const plans = [
  {
    value: "hobby",
    title: "Hobby",
    description: "1 projekt · Wsparcie społeczności",
    price: "0 $",
  },
  {
    value: "pro",
    title: "Pro",
    description: "Bez limitu projektów · Wsparcie e-mailowe",
    price: "20 $",
  },
  {
    value: "team",
    title: "Team",
    description: "Role, SSO i dzienniki audytu",
    price: "60 $",
  },
]

export default function RadioGroupChoiceCards() {
  return (
    <RadioGroup
      defaultValue="pro"
      aria-label="Plan"
      className="w-full max-w-md"
    >
      {plans.map((plan) => (
        <FieldLabel key={plan.value} htmlFor={`plan-${plan.value}`}>
          <Field orientation="horizontal">
            <RadioGroupItem value={plan.value} id={`plan-${plan.value}`} />
            <FieldContent>
              <FieldTitle>{plan.title}</FieldTitle>
              <FieldDescription>{plan.description}</FieldDescription>
            </FieldContent>
            <span className="text-sm font-semibold text-foreground tabular-nums">
              {plan.price}
              <span className="font-normal text-muted-foreground">/mies.</span>
            </span>
          </Field>
        </FieldLabel>
      ))}
    </RadioGroup>
  )
}

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

const densities = [
  { value: "compact", label: "Kompaktowa" },
  { value: "default", label: "Domyślna" },
  { value: "comfortable", label: "Wygodna" },
]

export default function RadioGroupHorizontal() {
  return (
    <FieldSet className="w-fit">
      <FieldLegend variant="label">Gęstość tabeli</FieldLegend>
      <RadioGroup
        defaultValue="default"
        className="flex flex-wrap gap-x-6 gap-y-3"
      >
        {densities.map((density) => (
          <Field
            key={density.value}
            orientation="horizontal"
            className="w-auto"
          >
            <RadioGroupItem
              value={density.value}
              id={`density-${density.value}`}
            />
            <FieldLabel
              htmlFor={`density-${density.value}`}
              className="font-normal"
            >
              {density.label}
            </FieldLabel>
          </Field>
        ))}
      </RadioGroup>
    </FieldSet>
  )
}

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

export default function RadioGroupStates() {
  return (
    <div className="grid w-full max-w-lg gap-10 sm:grid-cols-2">
      <FieldSet>
        <FieldLegend variant="label">Okres rozliczeniowy</FieldLegend>
        <RadioGroup defaultValue="monthly" disabled>
          <Field orientation="horizontal" data-disabled>
            <RadioGroupItem value="monthly" id="cycle-monthly" />
            <FieldLabel htmlFor="cycle-monthly" className="font-normal">
              Miesięczny
            </FieldLabel>
          </Field>
          <Field orientation="horizontal" data-disabled>
            <RadioGroupItem value="yearly" id="cycle-yearly" />
            <FieldLabel htmlFor="cycle-yearly" className="font-normal">
              Roczny
            </FieldLabel>
          </Field>
        </RadioGroup>
      </FieldSet>
      <FieldSet data-invalid>
        <FieldLegend variant="label">Szybkość dostawy</FieldLegend>
        <RadioGroup aria-invalid required>
          <Field orientation="horizontal">
            <RadioGroupItem value="standard" id="ship-standard" aria-invalid />
            <FieldLabel htmlFor="ship-standard" className="font-normal">
              Standardowa (3–5 dni)
            </FieldLabel>
          </Field>
          <Field orientation="horizontal">
            <RadioGroupItem value="express" id="ship-express" aria-invalid />
            <FieldLabel htmlFor="ship-express" className="font-normal">
              Ekspresowa (1–2 dni)
            </FieldLabel>
          </Field>
        </RadioGroup>
        <FieldError>Wybierz szybkość dostawy.</FieldError>
      </FieldSet>
    </div>
  )
}