Checkbox

    React Logo

    A control that allows the user to toggle between checked and not checked.

    <div className="flex items-center space-x-2">
<Checkbox id="terms" />
    <label
    htmlFor="terms"
    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
    Accept terms and conditions
    </label>
</div>

    Installation

     
    npx revueui add checkbox

    Options

    Variant

    Use the variant prop to change the appearance of the checkbox. The variant prop accepts the following values:

    Neutral Variant
    Primary Variant
    Secondary Variant
    <Checkbox variant="neutral">Neutral Variant</Checkbox>
<Checkbox variant="primary">Primary Variant</Checkbox>
<Checkbox variant="secondary">Secondary Variant</Checkbox>

    Size

    Use the size prop to change the size of the checkbox. The size prop accepts the following values:

    Small Checkbox
    Medium Checkbox
    Large Checkbox
    <Checkbox size="sm">Small Checkbox</Checkbox>
<Checkbox size="md">Medium Checkbox</Checkbox>
<Checkbox size="lg">Large Checkbox</Checkbox>

    Shape

    Use the shape prop to change the shape of the checkbox. The shape prop accepts the following values:

    Rectangle Shape
    Square Shape
    Circle Shape
    <Checkbox shape="rectangle">Rectangle Shape</Checkbox>
<Checkbox shape="square">Square Shape</Checkbox>
<Checkbox shape="circle">Circle Shape</Checkbox>

    Disabled

    Use the disabled prop to disable the checkbox.

    Disabled Option
    <Checkbox disabled>
  Disabled Option
</Checkbox>

    labelPosition

    Use the labelPosition prop to change the position of the label. The labelPosition prop accepts the following values:

    Label on the left
    Label on the right
    <Checkbox labelPosition="left">
  Label on the left
</Checkbox>
<Checkbox labelPosition="right">
  Label on the right
</Checkbox>

    description

    Use the description prop to add a description to the checkbox.

    Option with description

    This is additional information about the checkbox.

    <Checkbox description="This is additional information about the checkbox.">
  Option with description
</Checkbox>

    defaultChecked

    Use the defaultChecked prop to set the checkbox to checked by default.

    Pre-checked Option
    <Checkbox defaultChecked>
  Pre-checked Option
</Checkbox>

    readOnly

    Use the readOnly prop to make the checkbox read-only.

    Read-Only Option
    <Checkbox readOnly defaultChecked>
  Read-Only Option
</Checkbox>

    card

    Use the card prop to style the checkbox as a card.

    Card styled checkbox
    <Checkbox card cardClassName="border-gray-300 hover:border-gray-500">
  Card styled checkbox
</Checkbox>