For AI agents: the complete documentation index is available at /next/llms.txt, the full documentation bundle is available at /next/llms-full.txt, and this page is available as Markdown at /next/ui/components/checkbox.md.
lynx-ui logo
lynx-ui
  • English
  • <Checkbox>

    A headless Checkbox component for ReactLynx. It supports controlled/uncontrolled checked state and indeterminate mode.

    Basic Usage

    The most basic usage of the <Checkbox>

    Indeterminate State

    The indeterminate state is used when a <Checkbox> represents a group of options where some, but not all, are selected

    Structure

    <Checkbox className="checkbox">
      <CheckboxIndicator className="checkbox-indicator">
        {<YourOwnCheckIcon />}
      </CheckboxIndicator>
    </Checkbox>

    API

    Checkbox

    checkboxProps
    iOS
    Android
    TypeViewProps
    Checkbox supports original view props to be directly spread in this prop.
    checked
    iOS
    Android
    Typeboolean
    Whether the Checkbox is checked. If this property is set, the Checkbox will be in controlled mode, meaning the defaultChecked property will take no effects.
    className
    iOS
    Android
    Harmony
    Typestring
    className
    defaultChecked
    iOS
    Android
    Typeboolean·Defaultfalse
    Determines whether the Checkbox is checked by default. Use this property means the Checkbox is uncontrolled.
    disabled
    iOS
    Android
    Typeboolean·Defaultfalse
    Disables the Checkbox. The Checkbox cannot be interacted with.
    indeterminate
    iOS
    Android
    Typeboolean·Defaultfalse
    The indeterminate state of the Checkbox.
    onChange
    iOS
    Android
    Type(checked: boolean) => void
    The callback function that is triggered when the state changes
    style
    iOS
    Android
    Harmony
    TypeCSSProperties
    style
    children
    iOS
    Android
    TypeReactNode | ((status: { checked: boolean; indeterminate: boolean; active: boolean; disabled: boolean }) => ReactNode)
    children

    State-based styling & rendering

    This component exposes each of its internal states through two interchangeable channels, and the table below maps them one-to-one:

    • CSS className — a class like ui-<state> is toggled on the root node, so you can style it with selectors such as .ui-<state> { ... }.
    • Render-prop field — when children is a function, the same state is passed in via children({ <state>: boolean, ... }) for runtime-driven rendering.
    ui-checked
    Render Propchecked·Typeboolean
    Whether the checkbox is currently checked. Applied when `status.checked` is true.
    ui-indeterminate
    Render Propindeterminate·Typeboolean
    Whether the checkbox is in an indeterminate state. Applied when `status.indeterminate` is true.
    ui-active
    Render Propactive·Typeboolean
    Whether the checkbox is currently being pressed (and not disabled). Applied when `status.active` is true.
    ui-disabled
    Render Propdisabled·Typeboolean
    Whether the checkbox is disabled. Applied when `status.disabled` is true.

    CheckboxIndicator

    children
    iOS
    Android
    TypeReactNode
    The indicator of the Checkbox. Only displays child nodes when checked or indeterminate is true. If you need to keep it displayed when checked or indeterminate is false, set forceMount to true.
    className
    iOS
    Android
    Harmony
    Typestring
    className
    forceMount
    iOS
    Android
    Typeboolean·Defaultfalse
    Force mount the children. If set to true, the children will always be mounted even when checked or indeterminate is false.
    style
    iOS
    Android
    Harmony
    TypeCSSProperties
    style
    Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.