Radio Group

The Radio Group's used to select a single option from a list. It's built around the Radix UI Radio Group (opens in a new tab) for better accessibility.

Current Status

Built around Radix UI Radio Group primitive
Basic styling using Tailwind CSS
Four variants set via type prop: standard, horizontal, button, buttonLarge
Works as a controlled component when used within the Field component

Future

Add animations
Add visual polish
Improve responsive design for all common device sizes
Add darkmode support
Standardize color design token

Examples

How to use

Install Radix Radio Group primitive

npm install @radix-ui/react-radio-group

Create component

Copy the code from the sandbox above and paste it into a new file (e.g. RadioGroup.tsx)

Make it controlled

Wrap with Field component to add control via React Hook Form:

yourform.tsx

<Field
  name="radioButton"
  defaultValue="mario"
  >
  <Field.GroupLabel>Group label text here:</Field.GroupLabel>
  <Field.Control>
    <RadioGroup
      options={[
        { value: "mario", label: "Mario", icon: <Wrench /> },
        { value: "luigi", label: "Luigi", icon: <Flashlight /> },
        { value: "wario", label: "Wario", icon: <Zap /> },
        { value: "waluigi", label: "Waluigi", icon: <Skull /> },
      ]}
      variant="buttonLarge"
    />
  </Field.Control>
</Field>

Setup `defaultValues` and `zodSchema` in `Form`

Details in Form component

Component API

Required Prop	Type	Description
options	{ value: string, label: string, icon?: React Element }[]	Determines values/labels rendered. Icons only used for type="buttonLarge"

Optional Prop	Type	Description
variant	"standard" \| "horizontal" \| "button" \| "buttonLarge"	Change appearance of Radio Group

Input Select