Checkbox

const Checkbox: ForwardRefExoticComponent<CheckboxProps & RefAttributes<CheckboxHandle>>;

Toggle checkbox with label. Activated via Space or Enter.

Example

const [agreed, setAgreed] = useState(false);

<Checkbox
  checked={agreed}
  onChange={setAgreed}
  label="I agree to the terms"
  focusedStyle={{ bg: "cyan", color: "black" }}
/>

---

Properties

Property	Type	Description
checked	boolean	Whether the checkbox is checked
checkedChar?	string	Custom character for checked state (default: ”✓”)
disabled?	boolean	Whether the checkbox is disabled
focusedStyle?	Style	Style when focused
label?	string	Label text displayed next to the checkbox
onChange	(checked) => void	Called when the checkbox is toggled
style?	Style	Style for the checkbox container
uncheckedChar?	string	Custom character for unchecked state (default: ” “)

---

CheckboxHandle

Handle for Checkbox — exposes checked state

Extends

• FocusableHandle

Methods

blur()

blur(): void;

Programmatically blur (unfocus) this element

Returns

void

Inherited from

FocusableHandle.blur

---

focus()

focus(): void;

Programmatically focus this element

Returns

void

Inherited from

FocusableHandle.focus

---

scrollIntoView()

scrollIntoView(options?): void;

Scroll the nearest parent ScrollView to make this element visible. Behaves like the DOM Element.scrollIntoView() method. No-op if the element is not inside a ScrollView.

Parameters

Parameter	Type	Description
options?	ScrollIntoViewOptions	Alignment options (default: { block: "nearest" })

Returns

void

Example

const inputRef = useRef<InputHandle>(null);

// Minimal scroll — just enough to make it visible
inputRef.current?.scrollIntoView();

// Center the element in the viewport
inputRef.current?.scrollIntoView({ block: "center" });

Inherited from

FocusableHandle.scrollIntoView

Properties

Property	Modifier	Type	Description	Inherited from
checked	readonly	boolean	Whether the checkbox is currently checked	-
isFocused	readonly	boolean	Whether this element is currently focused	FocusableHandle.isFocused