Radio groups

Pale concrete planes and three circular openings rise against a soft blue sky.

Preview crop

OriginalSquarePortrait

Disable choices

Usage

Use a meaningful group label and a sensible default. Native arrow keys move through the choices; the selected state includes a visible mark.

Exports / ChoiceGroup

Patterns

React

import { useState } from "react";
import { ChoiceGroup } from "./folio";

export function CropChoice() {
  const [crop, setCrop] = useState("full");
  return <ChoiceGroup label="Preview crop" value={crop} onChange={setCrop}
    options={[{ value: "full", label: "Full" }, { value: "square", label: "Square" }]} />;
}