A simple radio button but a little better in terms of design.
import { PRadio } from 'pearkit';Just as it receives all input attributes, you can also send a label prop. Here is a simple usage.
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)}
/>
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.
<PRadio color="indigo"/>We can manage this state by sending the standard isInvalid property.
<PRadio isInvalid={true}/>
//or
<PRadio isInvalid/>
We can manage this state by sending the standard disabled property.
<PRadio disabled={true} />
//or
<PRadio disabled />
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 |