Checkbox

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

#
Documentation

#
Usage

Label

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.

Label

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

#
Disabled state

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

Label

import { Checkbox, Flex } from "@optiaxiom/react";
 
export function App() {
  return (
    <Flex flexDirection="row">
      <Checkbox defaultChecked disabled>
        Label
      </Checkbox>
      <Checkbox disabled>Label</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.

Label

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

#
Indeterminate

Set the checked prop to indeterminate to toggle the indeterminate state of the checkbox control.

Label

import { Checkbox } from "@optiaxiom/react";
import { useState } from "react";
 
export function App() {
  const [value, setValue] = useState<"indeterminate" | boolean>(false);
 
  return (
    <Checkbox
      checked={value}
      onCheckedChange={() =>
        setValue((value) =>
          value === "indeterminate" ? false : "indeterminate",
        )
      }
    >
      Label
    </Checkbox>
  );
}

#
Description

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

LabelHelper Text

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

#
Props

#
`Checkbox`

Supports all Box props in addition to its own.

Name	Type
asChild	`false \| true`
checked	`false \| true \| "indeterminate"`
defaultChecked	`false \| true \| "indeterminate"`
description	`ReactNode`
onCheckedChange	`(checked: CheckedState) => void`
required	`false \| true`

#
Changelog

#
0.1.0

Added component

Separator Field