Radio

Radio button with dot or tick indicator, spring animation, and description text.

forms v0.1.0

Playground

Examples

Dot (default)

<cg-stack gap="sm"><cg-radio name="p1" value="free" label="Free" checked></cg-radio><cg-radio name="p1" value="pro" label="Pro"></cg-radio><cg-radio name="p1" value="ent" label="Enterprise"></cg-radio></cg-stack>

Tick variant

<cg-stack gap="sm"><cg-radio variant="tick" name="p2" value="a" label="Option A" checked></cg-radio><cg-radio variant="tick" name="p2" value="b" label="Option B"></cg-radio><cg-radio variant="tick" name="p2" value="c" label="Option C"></cg-radio></cg-stack>

With description

<cg-stack gap="sm"><cg-radio name="p3" value="monthly" label="Monthly" description="$9/month, billed monthly" checked></cg-radio><cg-radio name="p3" value="annual" label="Annual" description="$7/month, billed annually"></cg-radio></cg-stack>

States

<cg-stack gap="sm"><cg-radio label="Error" error checked value="e"></cg-radio><cg-radio label="Success" success checked value="s"></cg-radio><cg-radio label="Disabled" disabled value="d"></cg-radio><cg-radio label="Loading" loading value="l"></cg-radio></cg-stack>

Import

import { CgRadio } from '@cognivo/components';

// Or tree-shake: import '@cognivo/components/cg-radio';

Per-component imports ship only that component (~8 kB gzip).

API Reference

Prop	Type	Default	Description
`name`	string	—	Radio group name
`value`	string	—	Radio value
`label`	string	—	Label text
`description`	string	—	Helper description below label
`checked`	boolean	false	Checked state
`disabled`	boolean	false	Disabled state
`error`	boolean	false	Error state
`success`	boolean	false	Success state
`loading`	boolean	false	Loading state
`variant`	"dot" \| "tick"	"dot"	Indicator style — dot or checkmark tick

Events

Event	Detail	Description
`cg-change`	{value, checked}	On selection