Collection of theme-ui and external components.
created:3/15/2021
updated:3/15/2021
source lines:78
comments %:1

Radio

Form radio input component

Radio variants can be defined in

theme.forms
and the component uses the
theme.forms.radio variant
by default.

Overview

({ checked }) => (
<>
<Label>
<Radio
name="dark-mode"
value={checked ? 'true' : 'false'}
defaultChecked={checked}
/>
Dark Mode
</Label>
<Label>
<Radio
name="dark-mode"
value={checked ? 'false' : 'true'}
defaultChecked={!checked}
/>
Light Mode
</Label>
</>
)

Controls

Name
Description
Default
Controls
checked
boolean
-

A11y tests

color

forms

name-role-value

Viewport

320px

375px

768px

1024px