Radio

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

import { Radio } from "rizzui";

Default

The default style of Radio component.

Default

import { Radio } from "rizzui";

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

Variants

You can change the style of Radio using variant property.

Outline

Flat

import { Radio } from "rizzui";

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

Extra Large

import { Radio } from "rizzui";

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"
      />
      <Radio
        className="m-2"
        label="Extra Large"
        size="xl"
      />
    </>
  );
}

Label Placement

You can set label on the two diffrient side using labelPlacement property.

Left Placement

Right Placement

import { Radio } from "rizzui";

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

import { Radio } from "rizzui";

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.

import { Radio } from "rizzui";

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

import { Radio } from "rizzui";

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. It could be string or a React component	__
labelClassName	string	Use labelClassName prop to apply some addition style for the field label	__
inputClassName	string	Add custom classes for the input filed 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" | "xl";