Radio

A basic widget for getting the user input. used for selecting single value from a list of options.

'use client';

import { Radio } from 'rizzui/radio';

Default

The default style of Radio component.

Default

'use client';

import { Radio } from 'rizzui/radio';

export default function App() {
  return <Radio label="Default" />;
}

Variants

You can change the style of Radio using variant property.

Outline

Flat

'use client';

import { Radio } from 'rizzui/radio';

export default function App() {
  return (
    <>
      <Radio className="m-2" label="Outline" />
      <Radio className="m-2" label="Flat" variant="flat" />
    </>
  );
}

Sizes

You can change the sizes of Radio using size property.

Small

Default

Large

'use client';

import { Radio } from 'rizzui/radio';

export default function App() {
  return (
    <>
      <Radio className="m-2" label="Small" size="sm" />
      <Radio className="m-2" label="Default" />
      <Radio className="m-2" label="Large" size="lg" />
    </>
  );
}

Label Placement

You can set label on the two different sides using labelPlacement property.

Left Placement

Right Placement

'use client';

import { Radio } from 'rizzui/radio';

export default function App() {
  return (
    <>
      <Radio className="m-2" label="Left Placement" labelPlacement="left" />
      <Radio className="m-2" label="Right Placement" labelPlacement="right" />
    </>
  );
}

Disabled

You can change style of Radio using disabled property.

Remember Me

'use client';

import { Radio } from 'rizzui/radio';

export default function App() {
  return <Radio className="m-2" label="Remember Me" disabled />;
}

With Helper Text

You can add helper text to Radio.

John

Hi! My name is John Doe.

'use client';

import { Radio } from 'rizzui/radio';

export default function App() {
  return (
    <Radio
      className="m-2"
      helperText="Hi! My name is John Doe."
      label="John"
      value="john"
    />
  );
}

With Error Message

You can show the validation error message using error property.

Yes

This field is required

'use client';

import { Radio } from 'rizzui/radio';

export default function App() {
  return (
    <Radio
      className="m-2"
      error="This field is required"
      label="Yes"
      value="yes"
    />
  );
}

API Reference

---

Radio Props

Here is the API documentation of the radio component. And the rest of the props of radio are the same as the original html input field.

Props	Type	Description	Default
label	ReactNode	Set field label	__
labelWeight	LabelWeight	Set label font weight	"medium"
labelPlacement	left right	Available directions of the label are:	"right"
variant	RadioVariants	The variants of the component are:	"outline"
size	RadioSizes	The size of the component. "sm" is equivalent to the dense radio styling.	"md"
disabled	boolean	Whether the radio is disabled	__
error	string	Show error message using this prop	__
helperText	ReactNode	Add helper text. Can be a string or a React component	__
labelClassName	string	Use labelClassName prop to apply some additional style for the field label	__
inputClassName	string	Add custom classes for the input field extra style	__
helperClassName	string	This prop allows you to customize the helper message style	__
errorClassName	string	This prop allows you to customize the error message style	__
className	string	Add custom classes to the root of the component	__
ref	Ref<HTMLInputElement>		__
...	InputHTMLAttributes	native props like value, onChange, onFocus, onBlur ...	__

Radio Variants

type RadioVariants = 'outline' | 'flat';

Label Weight

type LabelWeight = 'normal' | 'medium' | 'semibold' | 'bold';

Radio Sizes

type RadioSizes = 'sm' | 'md' | 'lg';