Forms

Radio Group

A set of checkable buttons where no more than one can be checked at a time.

Import

import { RadioGroup, Radio, Label } from "@countryclub/ui-react";

Default

With Label

Pair each radio with a Label via matching ids.

With Label & Hint

Add supporting hint text under each label.

Full clubhouse, golf and racquet privileges.

Weekday access to the course and dining room.

Pool, fitness and social events only.

Disabled

Disable every option via the group's "disabled" prop.

Disabled Individual Option

Disable a single option while the rest stay interactive.

Sizes

Two sizes via the "size" prop: "sm" (default) and "md".

Icon Simple

Rows with a featured icon, label and hint — the radio sits at the end.

Icon Card

Selectable cards — the border and ring follow the checked state.

Avatar

Pick a person — avatar, name and email in a card.

Payment Icon

Saved payment methods with brand marks.

Radio Button

A classic radio-first card with label and hint.

Checkbox

Radio behaviour with checkbox looks via variant="check".