Radio Card - Dreamy UI

Radio Card

A selectable card component that behaves like a Radio

#

Installation

pnpm dlx dreamy add radio-card

#

Usage

Radio Card is a multipart component. The hidden radio input is rendered automatically inside RadioCard.Root — pass all radio props to Root.

<RadioGroup full defaultValue="rr">
	<Group full>
		<RadioCard.Root full value="rr">
			<RadioCard.Header>
				<RadioCard.Title>React Router</RadioCard.Title>
				<RadioCard.Radio />
			</RadioCard.Header>
		</RadioCard.Root>
		<RadioCard.Root full value="next">
			<RadioCard.Header>
				<RadioCard.Title>Next.js</RadioCard.Title>
				<RadioCard.Radio />
			</RadioCard.Header>
		</RadioCard.Root>
		<RadioCard.Root full value="vue">
			<RadioCard.Header>
				<RadioCard.Title>Vue.js</RadioCard.Title>
				<RadioCard.Radio />
			</RadioCard.Header>
		</RadioCard.Root>
	</Group>
</RadioGroup>

#

With description

Add RadioCard.Description below the header for supporting text.

Description for React Router

Description for Next.js

Description for Vue.js

<RadioCard.Root full value="rr">
	<RadioCard.Header>
		<RadioCard.Title>React Router</RadioCard.Title>
		<RadioCard.Radio />
	</RadioCard.Header>
	<RadioCard.Description>Description for React Router</RadioCard.Description>
</RadioCard.Root>

#

Radio variant

Change the Radio variant of the Radio card.

Description for Outline

Description for Subtle

<RadioCard.Root full value="outline" variant="outline">
	<RadioCard.Header>
		<RadioCard.Title>Outline</RadioCard.Title>
		<RadioCard.Radio />
	</RadioCard.Header>
	<RadioCard.Description>Description for Outline</RadioCard.Description>
</RadioCard.Root>

#

Scheme

Change the color scheme of the Radio card.

<RadioCard.Root full value="primary" scheme="primary">
	<RadioCard.Header>
		<RadioCard.Title>Primary</RadioCard.Title>
		<RadioCard.Radio />
	</RadioCard.Header>
	<RadioCard.Description>Description for Primary</RadioCard.Description>
</RadioCard.Root>

#

Size

Change the Radio card size.

Description for Small

Description for Medium

Description for Large

<RadioCard.Root full value="sm" size="sm">
	<RadioCard.Header>
		<RadioCard.Title>Small</RadioCard.Title>
		<RadioCard.Radio />
	</RadioCard.Header>
	<RadioCard.Description>Description for Small</RadioCard.Description>
</RadioCard.Root>

#

Radio Group

You can control the Radio state by using value and onChange in <RadioGroup />.

Description for React Router

Description for Next.js

Description for Vue.js

export function ControlledRadioCards() {
    const [value, setValue] = useState<string | number>("rr");
 
    return (
        <RadioGroup
            value={value}
            onChange={setValue}
        >
            <Group
                full
                wrapped
            >
                <RadioCard.Root
                    value="rr"
                    full
                >
                    <RadioCard.Header>
                        <RadioCard.Title>React Router</RadioCard.Title>
                        <RadioCard.Radio />
                    </RadioCard.Header>
                    <RadioCard.Description>Description for React Router</RadioCard.Description>
                </RadioCard.Root>
            </Group>
        </RadioGroup>
    );
}

#

With icon

Use custom content inside RadioCard.Title or RadioCard.Description for richer layouts.

Description for React Router

Description for Next.js

Description for Vue.js

<RadioCard.Root full value="rr">
	<RadioCard.Header>
		<RadioCard.Title>
			<Flex col gap={2}> 
				<Icon as={<SiReactrouter />} boxSize="5" color="fg.medium" />
				<Text>React Router</Text>
			</Flex>
		</RadioCard.Title>
		<RadioCard.Radio />
	</RadioCard.Header>
	<RadioCard.Description>Description for React Router</RadioCard.Description>
</RadioCard.Root>

#

Hide radio indicator

Omit RadioCard.Radio to hide the radio indicator.

<RadioCard.Root full value="paypal">
	<RadioCard.Header>
		<RadioCard.Title>
			<Flex full gap={2} row center>
				<Icon as={<FaPaypal />} boxSize="5" color="fg.medium" />
				<Text>Paypal</Text>
			</Flex>
		</RadioCard.Title>
	</RadioCard.Header>
</RadioCard.Root>

Radio

Range Slider