Checkbox

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

'use client';
import '@helios-ui/react/styles.css';
import{NativeScope,NativeCheckboxExample}from'@helios-ui/react';
export function Example(){return <NativeScope><NativeCheckboxExample/></NativeScope>}

Sizes

Two sizes via the size prop - md (16px, the default) and sm (14px, used in dense tables).

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="checkbox" id="sizes"/>}

Labels & control

Pass children for a label - React Aria associates it with the input automatically. Use isSelected + onChange for controlled state, or defaultSelected for uncontrolled.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="checkbox" id="labels"/>}

Card

Selectable card with a title and optional description - the whole card toggles the checkbox and shows a hover background. NativeCheckboxCard is included in the Helios UI React source package.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="checkbox" id="card"/>}