Radio | Pol-ui - A beautiful and functional UI library for React and Next.js

The Radio component is a component that allows the user to select one option from a set of options.

It has a crucial role in forms, as it allows the user to select one option from a set of options. It can be used as a uncontrolled input or a controlled component, which means that it requires a value and an onChange prop to work properly.

Importation

Import the component from pol-ui to use the Radio element:

import { Radio } from "pol-ui";

Default Radio

import { Radio } from "pol-ui";
import { useState } from "react";
 
export const RadioComponent = (): JSX.Element => {
  const options = ["Option 1", "Option 2", "Option 3"];
  const [value, setValue] = useState(options[0]);
  return (
    <div className="flex flex-col gap-2 p-4 rounded-xl">
      {options.map((option) => {
        return (
          <Radio
            key={option}
            checked={value === option}
            onChange={() => setValue(option)}
            value={option}
            label={option}
          />
        );
      })}
    </div>
  );
};

Props

Prop name	Type	Default	Description
theme	RadioTheme		The theme object to customize the appearance of the Radio component.
color	Colors	ColorsEnum.primary	The color of the Radio component.
label	string	-	The label of the Radio component.

💡

You can also provide any prop comming from the HTML input tag.

Examples

All colors

import { Radio, theme } from "pol-ui";
 
export const AllColors = (): JSX.Element => {
  const options = ['1', '2', '3']
  return (
    <ul className="flex gap-4">
      {Object.keys(theme.radio.color).map(color => {
        return (
          <ul className="flex gap-2 flex-col" key={color}>
            {options.map(option => {
              return (
                <Radio
                  name={color}
                  key={option}
                  value={option}
                  label={color + option}
                  color={color as Colors}
                  defaultChecked={option === options[1]}
                />
              )
            })}
          </ul>
        )
      })}
    </ul>
  )
}

Uncontrolled Radio

Uncontrolled radio

import { Radio } from "pol-ui";
 
export const UnControlled = (): JSX.Element => {
  const options = ["Option 1", "Option 2", "Option 3"];
  return (
    <ul className="flex gap-2">
      {options.map((option) => {
        return (
          <Radio
            name="2"
            key={option}
            value={option}
            label={option}
            defaultChecked={option === options[1]}
          />
        );
      })}
    </ul>
  );
};

Dark Mode

Dark mode

import { Radio, theme } from "pol-ui";
import React from "react";
export const DarkMode = (): JSX.Element => {
  const options = ["Option 1", "Option 2", "Option 3"];
  const [value, setValue] = React.useState(options[0]);
  return (
    <div className="dark flex flex-col gap-2 bg-secondary-900 p-4 rounded-xl">
      {options.map((option) => {
        return (
          <Radio
            key={option}
            checked={value === option}
            onClick={() => setValue(option)}
            value={option}
            label={option}
          />
        );
      })}
    </div>
  );
};

Theme

To learn more about how to customize the appearance of components, please see the Theme docs.

interface RadioTheme {
  base: string;
  color: ColorsType;
  before: string;
  floating: {
    base: string;
    svg: string;
  };
  check: {
    base: string;
    color: ColorsType;
  };
}