Checkbox | RiseUI

Selection control with indeterminate, invalid, variants, and description slot — aligned with @heroui/react Checkbox and checkbox.css.

Usage

Default label (HeroUI Default).

RiseCheckbox(
  value: checked,
  onChanged: (v) => setState(() => checked = v ?? false),
  label: const Text('Accept terms and conditions'),
)

Controlled

External state + status line.

RiseCheckbox(
  value: enabled,
  onChanged: (v) => setState(() => enabled = v ?? false),
  label: const Text('Email notifications'),
)

Indeterminate

Tristate / dash (HeroUI Indeterminate).

RiseCheckbox(
  tristate: true,
  value: value,
  onChanged: (v) => setState(() => value = v),
  label: const Text('Select all'),
  description: const Text('Shows indeterminate state'),
)

With description

Label + helper (HeroUI WithDescription).

RiseCheckbox(
  value: checked,
  onChanged: (v) => setState(() => checked = v ?? false),
  label: const Text('Accept terms and conditions'),
  description: const Text('I agree to the terms and privacy policy'),
)

Invalid

Danger border + message (HeroUI Invalid).

RiseCheckbox(
  value: agreed,
  onChanged: (v) => setState(() => agreed = v ?? false),
  isInvalid: !agreed,
  label: const Text('I agree to the terms'),
  description: const Text('You must accept the terms to continue'),
)

Variants

Primary vs secondary (HeroUI Variants).

RiseCheckbox(
  variant: RiseCheckboxVariant.secondary,
  value: checked,
  onChanged: (v) => setState(() => checked = v ?? false),
  label: const Text('Secondary checkbox'),
  description: const Text('Lower emphasis variant for use in surfaces'),
)

Disabled

Non-interactive (HeroUI Disabled).

RiseCheckbox(
  value: false,
  onChanged: null,
  isDisabled: true,
  label: const Text('Feature'),
  description: const Text('This feature is coming soon'),
)

Custom indicator

Custom glyphs when checked (HeroUI WithCustomIndicator).

RiseCheckbox(
  value: liked,
  onChanged: (v) => setState(() => liked = v ?? false),
  label: const Text('Heart'),
  indicatorBuilder: (context, value, indeterminate) {
    if (value == true) return Icon(Icons.favorite, size: 14);
    return null;
  },
)

Render props

Label + description follow selection (HeroUI RenderProps).

RiseCheckbox(
  value: accepted,
  onChanged: (v) => setState(() => accepted = v ?? false),
  label: Text(accepted ? 'Terms accepted' : 'Accept terms'),
  description: Text(accepted ? 'Thank you' : 'Please read the terms'),
)

Sizes

sm · md · lg · xl (HeroUI FullRounded).

RiseCheckbox(
  size: RiseCheckboxSize.lg,
  value: on,
  onChanged: (v) => setState(() => on = v ?? false),
  label: const Text('Rounded checkbox'),
)

Features

Notification preferences list (HeroUI FeaturesAndAddOnsExample).

RiseCheckbox(
  variant: RiseCheckboxVariant.secondary,
  value: emailOn,
  onChanged: (v) => setState(() => emailOn = v ?? false),
  label: const Text('Email Notifications'),
  description: const Text('Receive updates via email'),
)