Get Started

Components

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

Checkbox

An interactive element that allows users to select or deselect an option to enable or disable a specific setting.

code

Expend code


    <form>
      <h1 className="text-xl font-semibold mb-4">Select options</h1>
      <div>
        <CheckBox
          label="Option 1"
          name="options"
          value="option1"
          checked={checkboxValue.includes('option1')}
          onChange={handleCheckboxChange}
        />
        <CheckBox
          label="Option 2"
          name="options"
          value="option2"
          checked={checkboxValue.includes('option2')}
          onChange={handleCheckboxChange}
        />
        <CheckBox
          label="Option 3"
          name="options"
          value="option3"
          checked={checkboxValue.includes('option3')}
          onChange={handleCheckboxChange}
        />
      </div>
    </form>


    <form>
      <h1 className="text-xl font-semibold mb-4">Select options</h1>
      <div>
        <CheckBox
          label="Option 1"
          name="options"
          value="option1"
          checked={checkboxValue.includes('option1')}
          onChange={handleCheckboxChange}
        />
        <CheckBox
          label="Option 2"
          name="options"
          value="option2"
          checked={checkboxValue.includes('option2')}
          onChange={handleCheckboxChange}
        />
        <CheckBox
          label="Option 3"
          name="options"
          value="option3"
          checked={checkboxValue.includes('option3')}
          onChange={handleCheckboxChange}
        />
      </div>
    </form>

#Horizontal Alignment

code

Expend code


    <form>
      <h1 className="text-xl font-semibold mb-4">Select options</h1>
      <div className="flex">
        <CheckBox
          label="Option 1"
          name="options"
          value="option1"
          checked={checkboxValue2.includes('option1')}
          onChange={handleCheckboxChange2}
        />
        <CheckBox
          label="Option 2"
          name="options"
          value="option2"
          checked={checkboxValue2.includes('option2')}
          onChange={handleCheckboxChange2}
        />
        <CheckBox
          label="Option 3"
          name="options"
          value="option3"
          checked={checkboxValue2.includes('option3')}
          onChange={handleCheckboxChange2}
        />
      </div>
    </form>


    <form>
      <h1 className="text-xl font-semibold mb-4">Select options</h1>
      <div className="flex">
        <CheckBox
          label="Option 1"
          name="options"
          value="option1"
          checked={checkboxValue2.includes('option1')}
          onChange={handleCheckboxChange2}
        />
        <CheckBox
          label="Option 2"
          name="options"
          value="option2"
          checked={checkboxValue2.includes('option2')}
          onChange={handleCheckboxChange2}
        />
        <CheckBox
          label="Option 3"
          name="options"
          value="option3"
          checked={checkboxValue2.includes('option3')}
          onChange={handleCheckboxChange2}
        />
      </div>
    </form>

#Checked & Disabled

code

Expend code


    <form>
      <h1 className="text-xl font-semibold mb-4">Select options</h1>
      <div>
        <CheckBox
          label="Option 1"
          name="options"
          value="option1"
          checked={checkboxValue3.includes('option1')}
          onChange={handleCheckboxChange3}
        />
        <CheckBox
          label="Option 2"
          name="options"
          value="option2"
          checked={checkboxValue3.includes('option2')}
          onChange={handleCheckboxChange3}
        />
        <CheckBox
          label="Option 3"
          name="options"
          value="option3"
          //checked={checkboxValue3.includes('option3')}
          checked={true}
          onChange={handleCheckboxChange3}
          disabled={true}
        />
      </div>
    </form>


    <form>
      <h1 className="text-xl font-semibold mb-4">Select options</h1>
      <div>
        <CheckBox
          label="Option 1"
          name="options"
          value="option1"
          checked={checkboxValue3.includes('option1')}
          onChange={handleCheckboxChange3}
        />
        <CheckBox
          label="Option 2"
          name="options"
          value="option2"
          checked={checkboxValue3.includes('option2')}
          onChange={handleCheckboxChange3}
        />
        <CheckBox
          label="Option 3"
          name="options"
          value="option3"
          //checked={checkboxValue3.includes('option3')}
          checked={true}
          onChange={handleCheckboxChange3}
          disabled={true}
        />
      </div>
    </form>

Checkbox

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	''	Additional CSS classes that can be applied to the CheckBox component for custom styling.
label	string	null	The text displayed next to the Checkbox component.
name	string	null	Used for grouping and identifying the checkbox.
value	string	null	The value of the checkbox.
checked	boolean	false	Indicates the checked state of the checkbox, controlling its state.
onChange	(event: React.ChangeEvent<HTMLInputElement>) => void	undefined	Callback function called when the checkbox state changes.
disabled	boolean	false	Determines whether the checkbox is disabled.