Radio Card

A stylized radio that allows you to add additional information or design elements to Radioes.

If you’re looking for RadioGroup, you can find it here.

Usage

import { RadioCard } from "#/ui/components/RadioCard"

<RadioCard>Radio</RadioCard>

As you build more complex components sometimes a simple radio doesn’t quite solve the needs of your design. The RadioCard component allows you to add additional information or design elements to Radioes.

Content

The RadioCard component accepts any content as its children. This allows you to add additional information or design elements to radios.

Make sure you pass a unique id to the RadioCard component that’s associated with a label element. This will ensure that the radio is accessible.

Alternatively, you can just pass a string to your RadioCard component (in which case, an id will be generated for you).

DefaultChecked

If you’d like to pre-select the radio, you can pass the defaultChecked prop.

Controlled

By default, the RadioCard manages its own state. You can control the state of the RadioCard from outside of the component by passing the checked and onChange props.

Show Radio

If you’d like, you can show the radio itself by passing the showRadio prop to the RadioCard component.

This tends to work better on larger cards

Additional Radio controls

For the sake of simplicity, you do lose out on some radio functionality when you use the radio card, however. If you’re missing some controls it’s recommended that you extend the RadioCard component, or create your own card components using the radio.

Customisation

Classes

All custom classes will be passed down to the RadioCard, so you can style it however you want.