Get Started

Components

accordion alert avatar breadcrumb button checkbox dropdown input label modal pagination radio select sheet skeleton switch table textarea toast

Radio

A single-selection interface element that allows users to choose only one option from a given set.

code

Expend code


    <form className="w-full max-w-xs">
      <h1 className="text-xl font-semibold py-3">Gender</h1>
      <div className="flex">
        <Radio
          label="Female"
          name="gender"
          value={'Female'}
        />
        <Radio
          label="Male"
          name="gender"
          value={'Male'}
        />
        <Radio
          label="Other"
          name="gender"
          value={'Other'}
        />
      </div>
    </form>


    <form className="w-full max-w-xs">
      <h1 className="text-xl font-semibold py-3">Gender</h1>
      <div className="flex">
        <Radio
          label="Female"
          name="gender"
          value={'Female'}
        />
        <Radio
          label="Male"
          name="gender"
          value={'Male'}
        />
        <Radio
          label="Other"
          name="gender"
          value={'Other'}
        />
      </div>
    </form>

#Vertical Alignment

code

Expend code


    <form className="flex flex-col">
        <h1 className="text-xl font-semibold py-3">Gender</h1>
        <div>
          <Radio
            label="Female"
            name="gender"
            value={'Female'}
          />
          <Radio
            label="Male"
            name="gender"
            value={'Male'}
          />
          <Radio
            label="Other"
            name="gender"
            value={'Other'}
          />
        </div>
      </form>


    <form className="flex flex-col">
        <h1 className="text-xl font-semibold py-3">Gender</h1>
        <div>
          <Radio
            label="Female"
            name="gender"
            value={'Female'}
          />
          <Radio
            label="Male"
            name="gender"
            value={'Male'}
          />
          <Radio
            label="Other"
            name="gender"
            value={'Other'}
          />
        </div>
      </form>

#DefaultChecked

code

Expend code


    <form className="w-full max-w-xs">
      <h1 className="text-xl font-semibold py-3">Gender</h1>
      <div className="flex">
        <Radio
          label="Female"
          name="gender"
          value={'Female'}
          defaultChecked
        />
        <Radio
          label="Male"
          name="gender"
          value={'Male'}
        />
        <Radio
          label="Other"
          name="gender"
          value={'Other'}
        />
      </div>
    </form>


    <form className="w-full max-w-xs">
      <h1 className="text-xl font-semibold py-3">Gender</h1>
      <div className="flex">
        <Radio
          label="Female"
          name="gender"
          value={'Female'}
          defaultChecked
        />
        <Radio
          label="Male"
          name="gender"
          value={'Male'}
        />
        <Radio
          label="Other"
          name="gender"
          value={'Other'}
        />
      </div>
    </form>

#Disabled

code

Expend code


    <form className="w-full max-w-xs">
      <h1 className="text-xl font-semibold py-3">Gender</h1>
      <div className="flex">
        <Radio
          label="Female"
          name="gender"
          value={'Female'}
        />
        <Radio
          label="Male"
          name="gender"
          value={'Male'}
        />
        <Radio
          label="Other"
          name="gender"
          value={'Other'}
          disabled={true}
        />
      </div>
    </form>


    <form className="w-full max-w-xs">
      <h1 className="text-xl font-semibold py-3">Gender</h1>
      <div className="flex">
        <Radio
          label="Female"
          name="gender"
          value={'Female'}
        />
        <Radio
          label="Male"
          name="gender"
          value={'Male'}
        />
        <Radio
          label="Other"
          name="gender"
          value={'Other'}
          disabled={true}
        />
      </div>
    </form>

Radio

The properties of the Radio component used to display the check state or group information of a radio button.

Prop	Type	Default	Description
className	string	null	Specifies the CSS styles for the Radio component.
label	string	null	The text displayed next to the radio button.
name	string	null	The group name of the radio button.
value	string	null	The value of the radio button.
onChange	(event: React.ChangeEvent<HTMLInputElement>) => void	undefined	Callback function called when the selection box of the radio button changes.
defaultChecked	boolean	false	Determines whether the component should be initially rendered in a selected state.
disabled	boolean	false	Determines whether the radio button is disabled.