Radio Component

Radio is a React component designed to create customizable input fields with options such as color, label, name, and more. It supports different sizes and colors along with disabled and checked states.

Example Preview

Radio Example

Usage

import { Radio } from "@/@core";
 
// ...
 
const MyComponent = () => {
  return (
    <Fragment>
      <Radio
        defaultChecked
        name="radio-1"
        color="primary"
        label="Primary Radio"
      />
      <Radio
        checked
        name="radio-1"
        color="error"
        size="lg"
        label="Large Error Radio"
      />
      <Radio disabled label="Disabled Radio" />
    </Fragment>
  );
};
 
export default MyComponent;

Props

Prop name	Type	Default value	Required	Description
`checked`	boolean	-	No	Boolean indicating whether the checkbox is checked.
`name`	string	-	Yes	String representing the name of the radio button.
`defaultChecked`	boolean	-	No	Boolean indicating the default checked state.
`color`	`primary`, `secondary`, `error`, `success`, `warning`, `info`, `accent`	-	No	String representing the color theme of the checkbox.
`label`	string	-	No	String representing the label text for the checkbox.
`disabled`	boolean	-	No	Boolean indicating whether the checkbox is disabled.
`size`	`xs`, `sm`, `md`, `lg`	-	No	String representing the size of the checkbox.
`className`	string	-	No	Additional class names for styling purposes.
`props`	HTMLAttributes<HTMLInputElement>	-	No	Additional HTML attributes can be passed as well.

Styling

The component provides various styling options based on the color and size props. The label text size and color can be customized accordingly.

Customizing Example

import { Radio } from "@/@core";
 
const MyComponent = () => {
  const [checked, setChecked] = useState(false);
 
  return (
    <Fragment>
      <Radio
        checked={checked}
        color="primary"
        label="Primary Radio"
        name="radio-1"
        className="checked:border-indigo-800 [--chkbg:theme(colors.indigo.600)] [--chkfg:orange]"
        onChange={() => setChecked(!checked)}
      />
      <Radio
        defaultChecked
        color="primary"
        label="Primary Radio"
        name="radio-1"
        className="[--chkbg:oklch(var(--a))] [--chkfg:oklch(var(--p))]"
      />
    </Fragment>
  );
};
 
export default MyComponent;

All Available Props

import { Radio } from '@/@core';
 
// ...
 
const AllAvailableProps = () => {
   return (
      <Fragment>
         <Radio
            checked={/* boolean */}
            defaultChecked={/* boolean */}
            color={/* 'primary' | 'secondary' | 'error' | 'success' | 'warning' | 'info' | 'accent' */}
            label={/* string */}
            disabled={/* boolean */}
            size={/* 'xs' | 'sm' | 'md' | 'lg' */}
            name={/* string */}
            className={/* string */}
            /* Other HTML attributes for the input element */
          />
      </Fragment>
   );
};
 
export default AllAvailableProps;

ℹ️

Note: The Radio component is inspired by the DaisyUI (opens in a new tab) framework. Check it out for more awesome components. But our Radio component is dynamic and easy to use. It is also fully customizable.

File Input Range Slider