---
sidebar_position: 8
---

import { Radio } from "rizzui";
import Paper from "@site/src/components/paper";

# Radio

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

```tsx
import { Radio } from "rizzui";
```

<div className="mb-20 md:mb-28" />

## Default

The default style of **Radio** component.

<Paper className="text-gray-900">
  <Radio label="Default" />
</Paper>

```tsx
import { Radio } from "rizzui";

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

<div className="mb-16" />

## Variants

You can change the style of **Radio** using [**variant**](#radio-variants) property.

<Paper className="flex-row justify-around gap-4 flex-wrap text-gray-900">
  <Radio
    className="m-2"
    label="Outline"
  />
  <Radio
    className="m-2"
    label="Flat"
    variant="flat"
  />
</Paper>

```tsx
import { Radio } from "rizzui";

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

<div className="mb-16" />

## Sizes

You can change the sizes of **Radio** using [**size**](#radio-sizes) property.

<Paper className="flex-row justify-around gap-4 flex-wrap text-gray-900">
  <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"
  />
</Paper>

```tsx
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"
      />
    </>
  );
}
```

<div className="mb-16" />

## Label Placement

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

<Paper className="flex-row flex-wrap justify-around gap-4 text-gray-900">
  <Radio
    className="m-2"
    label="Left Placement"
    labelPlacement="left"
  />
  <Radio
    className="m-2"
    label="Right Placement"
    labelPlacement="right"
  />
</Paper>

```tsx
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"
      />
    </>
  );
}
```

<div className="mb-16" />

## Disabled

You can change style of **Radio** using **disabled** property.

<Paper className="text-gray-900">
  <Radio
    className="m-2"
    label="Remember Me"
    disabled
  />
</Paper>

```tsx
import { Radio } from "rizzui";

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

<div className="mb-16" />

## With Helper Text

You can add helper text to **Radio**.

<Paper className="text-gray-900">
  <Radio
    className="m-2"
    helperText="Hi! My name is John Doe."
    label="John"
    value="john"
  />
</Paper>

```tsx
import { Radio } from "rizzui";

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

<div className="mb-16" />

## With Error Message

You can show the validation error message using **error** property.

<Paper className="text-gray-900">
  <Radio
    className="m-2"
    error="This field is required"
    label="Yes"
    value="yes"
  />
</Paper>

```tsx
import { Radio } from "rizzui";

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

<div className="mb-20" />

## API Reference

<hr />

<div className="mb-10" />

### 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.

<div className="overflow-x-auto">

|      Props      |               Type               |                                   Description                                    |   Default   |
| :-------------: | :------------------------------: | :------------------------------------------------------------------------------: | :---------: |
|      label      |           `ReactNode`            |                                 Set field label                                  |    \_\_     |
|   labelWeight   |   [LabelWeight](#label-weight)   |                              Set label font weight                               | `"medium"`  |
| labelPlacement  |          `left` `right`          |                      Available directions of the label are:                      |  `"right"`  |
|     variant     | [RadioVariants](#radio-variants) |                        The variants of the component are:                        | `"outline"` |
|      size       |    [RadioSizes](#radio-sizes)    | The size of the component. <br /> "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** ...      |    \_\_     |

</div>

<div className="mb-10" />

### Radio Variants

```ts
type RadioVariants = "outline" | "flat";
```

<div className="mb-10" />

### Label Weight

```ts
type LabelWeight = "normal" | "medium" | "semibold" | "bold";
```

<div className="mb-10" />

### Radio Sizes

```ts
type RadioSizes = "sm" | "md" | "lg" | "xl";
```
