Skip to Content
ComponentsCheckbox

Checkbox

Basic control to allow selecting one or more items from a set.

Source

#

Documentation

#

Usage

import { Checkbox } from "@optiaxiom/react";
 
export function App() {
  return <Checkbox>Label</Checkbox>;
}

#

Label

The children prop is used as the label of the checkbox control.

import { Checkbox, Flex, Separator } from "@optiaxiom/react";
 
export function App() {
  return (
    <Flex flexDirection="row">
      <Checkbox>Label</Checkbox>
      <Separator orientation="vertical" />
      <Checkbox />
    </Flex>
  );
}

#

Controlled

Use the checked and defaultChecked props to toggle between controlled and uncontrolled usage. And combine it with onCheckedChange to listen for changes to the state.

"use client";
 
import { Button, Checkbox, Flex } from "@optiaxiom/react";
import { useState } from "react";
 
export function App() {
  const [value, setValue] = useState(false);
 
  return (
    <Flex flexDirection="row">
      <Checkbox checked={value} onCheckedChange={setValue}>
        Label
      </Checkbox>
 
      <Button disabled={!value} onClick={() => setValue(false)}>
        Reset
      </Button>
    </Flex>
  );
}

#

Disabled state

Enable the disabled prop to toggle the disabled state of the checkbox control.

import { Checkbox, Flex } from "@optiaxiom/react";
 
export function App() {
  return (
    <Flex flexDirection="row">
      <Checkbox defaultChecked disabled>
        Label
      </Checkbox>
      <Checkbox disabled>Label</Checkbox>
    </Flex>
  );
}

#

Indeterminate

Enable the indeterminate prop to toggle the indeterminate state of the checkbox control.

import { Checkbox } from "@optiaxiom/react";
 
export function App() {
  return <Checkbox indeterminate>Label</Checkbox>;
}

#

Description

Use the description prop to add helper text after the label.

import { Checkbox } from "@optiaxiom/react";
 
export function App() {
  return <Checkbox description="Helper Text">Label</Checkbox>;
}

#

Related

RadioGroup

Basic control to allow selecting only one item from a set.

Switch

Control to allow toggling between checked and not checked state.

#

Props

#

Checkbox

Supports all Box props in addition to its own. Renders a <div> element but forwards all props to a hidden <input> element.

Prop

asChild

Change the default rendered element for the one passed as a child, merging their props and behavior.

Read the Composition guide for more details.

false | true

className

string

description

Add secondary text after the label.

ReactNode

indeterminate

Display a partially checked icon instead of the regular checkmark.

false | true

onCheckedChange

Handler that is called when the checked state changes.

(checked: boolean) => void

#

Changelog

#

0.2.0

  • Moved indeterminate from checked state to explicit prop

#

0.1.0

  • Added component
Last updated on
CardDataTable