Radio

pnpm add @inpulse-ds/radio

Usage

This component needs to be in the context of a form to be rendered. Make sure it is applied this way.

import { useForm } from "react-hook-form";
import { Form } from '@inpulse-ds/form';
import { Radio, RadioItem } from '@inpulse-ds/radio';
 
const methods = useForm();
 
export function Demo() {
  return (
    <Form methods={methods}>
      <Radio name="radio">
        ...
      </Radio>
    </Form>
  );
}

API

Root

Prop	Type	Default value	Required
`defaultValue`	`string`	-	No
`onChange`	`function`	-	No
`name`	`string`	-	Yes
`disabled`	`boolean`	-	No

Item

An item, part of a group, that can be selected. An input will be rendered to ensure proper event propagation.

Prop	Type	Default value	Required
`id`	`string`	-	No
`value`	`string`	-	No
`disabled`	`boolean`	`false`	No
`mono`	`boolean`	`false`	No

Examples

Default value

You can set a default value to be selected when the component is rendered. To do this, simply set the defaultValue property in Radio.

Disable items

You can disable a radio item individually by setting the disabled property to true directly on RadioItem.

Or disable the entire group of radio buttons by setting the disabled property to true in Radio.

Colors

By default, Radio will be assigned the theme's primary color when enabled. But you can customize this color through CSS classes. The class must be applied directly to RadioItem. This way, you have the freedom to define different colors for each item.

Adopt a monochromatic style for Radio by setting the mono property to true. This style will adapt to the system's light and dark mode. The property must be applied directly to RadioItem.

Events

Use the onChange event to perform an action every time the value of the Radio is changed.

Installation