Uiplex

Checkbox

A flexible checkbox component with support for individual checkboxes and checkbox groups with multiple selections

Basic Usage

import { Checkbox } from 'uiplex';

const [selectedValues, setSelectedValues] = useState<string[]>([]);

<Checkbox
  name="basic"
  value="option1"
  label="Option 1"
  checked={selectedValues.includes("option1")}
  onChange={(checked, value) => {
    if (checked) {
      setSelectedValues([...selectedValues, value]);
    } else {
      setSelectedValues(selectedValues.filter((v) => v !== value));
    }
  }}
/>

Checkbox Group

import { CheckboxGroup } from 'uiplex';

const [groupValues, setGroupValues] = useState<string[]>([]);

<CheckboxGroup
  name="group"
  value={groupValues}
  onChange={setGroupValues}
  options={[
    { value: "option1", label: "Option 1" },
    { value: "option2", label: "Option 2" },
    { value: "option3", label: "Option 3" },
  ]}
/>

With Descriptions

<CheckboxGroup
  name="descriptions"
  value={groupValues}
  onChange={setGroupValues}
  options={[
    {
      value: "option1",
      label: "Free Plan",
      description: "Perfect for getting started",
    },
    {
      value: "option2",
      label: "Pro Plan",
      description: "Best for growing businesses",
    },
    {
      value: "option3",
      label: "Enterprise Plan",
      description: "For large organizations",
    },
  ]}
/>

Color Schemes

<CheckboxGroup
  name="colors"
  value={colorValues}
  onChange={setColorValues}
  colorScheme="blue"
  options={[...]}
/>

<CheckboxGroup
  name="colors2"
  value={colorValues}
  onChange={setColorValues}
  colorScheme="green"
  options={[...]}
/>

<CheckboxGroup
  name="colors3"
  value={colorValues}
  onChange={setColorValues}
  colorScheme="red"
  options={[...]}
/>

Sizes

<CheckboxGroup size="sm" options={[...]} />
<CheckboxGroup size="md" options={[...]} />
<CheckboxGroup size="lg" options={[...]} />

Horizontal Layout

<CheckboxGroup
  name="horizontal"
  value={groupValues}
  onChange={setGroupValues}
  orientation="horizontal"
  options={[
    { value: "option1", label: "Option 1" },
    { value: "option2", label: "Option 2" },
    { value: "option3", label: "Option 3" },
  ]}
/>

Disabled State

<CheckboxGroup
  name="disabled"
  value={groupValues}
  onChange={setGroupValues}
  disabled
  options={[
    { value: "option1", label: "Disabled Option 1" },
    { value: "option2", label: "Disabled Option 2" },
    { value: "option3", label: "Disabled Option 3" },
  ]}
/>

Individual Disabled Options

<CheckboxGroup
  name="individual-disabled"
  value={groupValues}
  onChange={setGroupValues}
  options={[
    { value: "option1", label: "Option 1" },
    { value: "option2", label: "Option 2", disabled: true },
    { value: "option3", label: "Option 3" },
  ]}
/>

API Reference

Checkbox Props

PropTypeDefaultDescription
idstring-Unique identifier for the checkbox input
namestring-Name attribute for the checkbox input (required)
valuestring-Value of the checkbox option (required)
checkedbooleanfalseWhether the checkbox is selected
disabledbooleanfalseWhether the checkbox is disabled
labelstring-Label text for the checkbox option
descriptionstring-Description text below the label
size"sm" | "md" | "lg""md"Size variant of the checkbox
colorScheme"blue" | "green" | "red" | "yellow" | "purple" | "gray""blue"Color scheme for the checkbox
onChange(checked: boolean, value: string) => void-Callback when checkbox state changes
classNamestring""Additional CSS classes

CheckboxGroup Props

PropTypeDefaultDescription
namestring-Name attribute for the checkbox group (required)
valuestring[][]Array of currently selected values
optionsArray<{value: string, label?: string, description?: string, disabled?: boolean}>-Array of checkbox options (required)
disabledbooleanfalseWhether all checkboxes in the group are disabled
size"sm" | "md" | "lg""md"Size variant for all checkboxes in the group
colorScheme"blue" | "green" | "red" | "yellow" | "purple" | "gray""blue"Color scheme for all checkboxes in the group
onChange(values: string[]) => void-Callback when selection changes
classNamestring""Additional CSS classes
orientation"horizontal" | "vertical""vertical"Layout direction of the checkbox group