AdvancedRadio

A basic widget for getting the user input of radio with advanced design.

import { AdvancedRadio } from "rizzui";

Simple Advanced Radio

You can change style of AdvancedRadio.

Any

1

2

3

4

5+

import { AdvancedRadio } from "rizzui";

export default function App() {
  return (
    <div className="flex flex-wrap gap-6">
      <AdvancedRadio
        name="age"
        value="any"
        alignment="center"
      >
        Any
      </AdvancedRadio>
      <AdvancedRadio
        name="age"
        value="one"
        defaultChecked
        alignment="center"
      >
        1
      </AdvancedRadio>
      <AdvancedRadio
        name="age"
        value="two"
        alignment="center"
      >
        2
      </AdvancedRadio>
      <AdvancedRadio
        name="age"
        value="three"
        disabled
        alignment="center"
      >
        3
      </AdvancedRadio>
      <AdvancedRadio
        name="age"
        value="four"
        alignment="center"
      >
        4
      </AdvancedRadio>
      <AdvancedRadio
        name="age"
        value="five+"
        alignment="center"
      >
        5+
      </AdvancedRadio>
    </div>
  );
}

Currency Card Radio

You can give different style of AdvancedRadio as you need.

Taka

Dollar

Euro

Pound

import { AdvancedRadio } from "rizzui";

export default function App() {
  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
      <AdvancedRadio
        name="currency"
        value="taka"
        defaultChecked
      >
        <CurrencyBangladeshiIcon className="w-7 h-auto mb-4" />
        <Text className="font-semibold">Taka</Text>
      </AdvancedRadio>
      <AdvancedRadio
        name="currency"
        value="dollar"
      >
        <CurrencyDollarIcon className="w-7 h-auto mb-4" />
        <Text className="font-semibold">Dollar</Text>
      </AdvancedRadio>
      <AdvancedRadio
        name="currency"
        value="euro"
      >
        <CurrencyEuroIcon className="w-7 h-auto mb-4" />
        <Text className="font-semibold">Euro</Text>
      </AdvancedRadio>
      <AdvancedRadio
        name="currency"
        value="pound"
      >
        <CurrencyPoundIcon className="w-7 h-auto mb-4" />
        <Text className="font-semibold">Pound</Text>
      </AdvancedRadio>
    </div>
  );
}

API Reference

---

AdvancedRadio Props

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

Props	Type	Description	Default
children	ReactNode	Pass content as children	__
disabled	boolean	Whether the checkbox is disabled or not	__
size	RadioSizes	The size of the component. "sm" is equivalent to the dense input styling.	"md"
rounded	RadioRounded	The rounded variants are:	"md"
inputClassName	string	Add inputClassName to style the input	__
contentClassName	string	Add contentClassName to style the input	__
className	string	Add custom classes to the root of the component	__
ref	Ref<HTMLInputElement>		__
...	InputHTMLAttributes	native props like value, onChange, onFocus, onBlur ...	__

Advanced Radio Sizes

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

Advanced Radio Rounded

type RadioRounded = "sm" | "md" | "lg" | "pill" | "none";