shadcn-preact
Components

Radio Group

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.

PreviewSource
Example requirements

Also uses: Label.

Installation

Complete the project setup first, including Tailwind CSS v4, theme tokens, and Preact compatibility aliases.

1. Install dependencies

bun add --exact cn@0.4.0 preact@11.0.0 tw-animate-css@1.4.0

The usage example also needs Label. Follow their installation guides as well.

2. Copy the component with degit

Run this from your project root. It selects radio-group.tsx, its local dependencies, and both licenses directly from the repository, then copies them into src/components/ui.

bunx degit@3.10.0 https://github.com/LiasCode/shadcn-preact#main ./.cache/shadcn-preact/radio-group --files LICENSE.md,registry/ui/lib/utils.ts,registry/ui/primitives/LICENSE,registry/ui/primitives/direction-provider/index.tsx,registry/ui/primitives/field/control/FieldControl.tsx,registry/ui/primitives/internals/FieldRootContext.ts,registry/ui/primitives/internals/FieldsetRootContext.ts,registry/ui/primitives/internals/LabelableContext.ts,registry/ui/primitives/internals/composite/item/CompositeItem.tsx,registry/ui/primitives/internals/composite/list/CompositeList.tsx,registry/ui/primitives/internals/composite/list/useCompositeListItem.ts,registry/ui/primitives/internals/composite/root/CompositeRoot.tsx,registry/ui/primitives/internals/composite/root/CompositeRootContext.ts,registry/ui/primitives/internals/createBaseUIEventDetails.ts,registry/ui/primitives/internals/direction-context.ts,registry/ui/primitives/internals/empty.ts,registry/ui/primitives/internals/getReactElementRef.ts,registry/ui/primitives/internals/getStateAttributesProps.ts,registry/ui/primitives/internals/mergeObjects.ts,registry/ui/primitives/internals/resolveClassName.ts,registry/ui/primitives/internals/resolveRef.ts,registry/ui/primitives/internals/resolveStyle.ts,registry/ui/primitives/internals/stateAttributesMapping.ts,registry/ui/primitives/internals/types.ts,registry/ui/primitives/internals/useAnimationFrame.ts,registry/ui/primitives/internals/useAnimationsFinished.ts,registry/ui/primitives/internals/useButton.ts,registry/ui/primitives/internals/useControlled.ts,registry/ui/primitives/internals/useFocusableWhenDisabled.ts,registry/ui/primitives/internals/useId.ts,registry/ui/primitives/internals/useIsoLayoutEffect.ts,registry/ui/primitives/internals/useMergedRefs.ts,registry/ui/primitives/internals/useOnMount.ts,registry/ui/primitives/internals/useOpenChangeComplete.ts,registry/ui/primitives/internals/useRefWithInit.ts,registry/ui/primitives/internals/useRegisterFieldControl.ts,registry/ui/primitives/internals/useRenderElement.ts,registry/ui/primitives/internals/useStableCallback.ts,registry/ui/primitives/internals/useTransitionStatus.ts,registry/ui/primitives/internals/visuallyHidden.ts,registry/ui/primitives/merge-props/index.ts,registry/ui/primitives/radio-group/RadioGroup.tsx,registry/ui/primitives/radio-group/RadioGroupContext.ts,registry/ui/primitives/radio-group/index.ts,registry/ui/primitives/radio/index.parts.ts,registry/ui/primitives/radio/index.ts,registry/ui/primitives/radio/indicator/RadioIndicator.tsx,registry/ui/primitives/radio/root/RadioRoot.tsx,registry/ui/primitives/radio/root/RadioRootContext.ts,registry/ui/primitives/radio/utils/stateAttributesMapping.ts,registry/ui/radio-group.tsx --force
mkdir -p ./src/components/ui
cp -R ./.cache/shadcn-preact/radio-group/registry/ui/. ./src/components/ui/
cp ./.cache/shadcn-preact/radio-group/LICENSE.md ./src/components/ui/LICENSE.md

The temporary copy lives in .cache/shadcn-preact/radio-group. Existing components stay in place; shared source files are updated from main.

Selected source files (50)

Usage

import { Label } from "./components/ui/label"
import { RadioGroup, RadioGroupItem } from "./components/ui/radio-group"
<RadioGroup defaultValue="option-one">
  <div className="flex items-center gap-3">
    <RadioGroupItem value="option-one" id="option-one" />
    <Label htmlFor="option-one">Option One</Label>
  </div>
  <div className="flex items-center gap-3">
    <RadioGroupItem value="option-two" id="option-two" />
    <Label htmlFor="option-two">Option Two</Label>
  </div>
</RadioGroup>

Examples

Description

Radio group items with a description using the Field component.

DescriptionSource
Preview
Example requirements

Also uses: Field.

Choice Card

Use FieldLabel to wrap the entire Field for a clickable card-style selection.

Choice CardSource
Preview
Example requirements

Also uses: Field.

Fieldset

Use FieldSet and FieldLegend to group radio items with a label and description.

FieldsetSource
Preview
Example requirements

Also uses: Field.

Disabled

Use the disabled prop on RadioGroup to disable all items.

DisabledSource
Preview
Example requirements

Also uses: Field.

Invalid

Use aria-invalid on RadioGroupItem and data-invalid on Field to show validation errors.

InvalidSource
Preview
Example requirements

Also uses: Field.

Reference

See the official Radio Group documentation for composition patterns and API details. This page uses the Preact port and examples from the pinned upstream revision.

Component source