Radio

Radio #

A simple radio button but a little better in terms of design.

import { PRadio } from 'pearkit';

Basic #

Just as it receives all input attributes, you can also send a label prop. Here is a simple usage.

Option 1Option 2

const [option, setOption] = useState('option1');

<PRadio
    label="Option 1"
    name="options"
    value="option1"
    checked={option === 'option1'}
    onChange={(e) => setOption(e.target.value)}
/>
<PRadio
    label="Option 2"
    name="options"
    value="option2"
    checked={option === 'option2'}
    onChange={(e) => setOption(e.target.value)}
/>

Colors #

Since we use the tailwind color palette in our design, you can use the names of all tailwind colors as props. For example : sky red indigo etc.

IndigoRedGreen

<PRadio color="indigo"/>

Invalid #

We can manage this state by sending the standard isInvalid property.

Invalid

<PRadio isInvalid={true}/>
//or
<PRadio isInvalid/>

Disabled #

We can manage this state by sending the standard disabled property.

Disabled

<PRadio disabled={true} />
//or
<PRadio disabled />

Accessibility (Not Ready Yet) #

Api #

Here you can see all the working features for the radio component.

Name	Type	Default	Description
label	string	null	Label of the component
colors	TwColor	blue	Colors of the component
isInvalid	boolean \| true \| false	blue	Invalid state of the component

Overlay

Switch