Switch | RiseUI

Boolean toggle with sizes, label placement, description, thumb icons, and SwitchGroup — aligned with @heroui/react Switch and switch.css.

Usage

Default off and on (HeroUI Default + DefaultSelected).

RiseSwitch(
  value: on,
  onChanged: (v) => setState(() => on = v),
  label: const Text('Enable notifications'),
)

Disabled

Unchecked and checked disabled (HeroUI Disabled + DisabledDefaultSelected).

RiseSwitch(
  value: false,
  onChanged: null,
  isDisabled: true,
  label: const Text('Enable notifications'),
)

Controlled

External state with status text.

RiseSwitch(
  value: on,
  onChanged: (v) => setState(() => on = v),
  label: const Text('Enable notifications'),
)

Without label

Track only — use semanticLabel for a11y.

RiseSwitch(
  value: on,
  onChanged: (v) => setState(() => on = v),
  semanticLabel: 'Enable notifications',
)

Sizes

sm · md · lg (HeroUI Sizes).

RiseSwitch(
  size: RiseSwitchSize.sm,
  value: on,
  onChanged: (v) => setState(() => on = v),
  label: const Text('Enable notifications'),
)

Label position

Label after vs before the control (HeroUI LabelBefore).

RiseSwitch(
  labelPosition: RiseSwitchLabelPosition.before,
  value: on,
  onChanged: (v) => setState(() => on = v),
  label: const Text('Enable notifications'),
)

With description

Label + Description in switch content (HeroUI WithDescription).

RiseSwitch(
  value: on,
  onChanged: (v) => setState(() => on = v),
  label: const Text('Public profile'),
  description: const Text('Allow others to see your profile information'),
)

With custom styles

accentColor for checked track (HeroUI WithCustomStyles).

RiseSwitch(
  value: on,
  onChanged: (v) => setState(() => on = v),
  accentColor: Colors.blue,
  label: const Text('Accent (blue)'),
)

With icons

Thumb icons and accent colors (HeroUI WithIcons).

RiseSwitch(
  value: on,
  onChanged: (v) => setState(() => on = v),
  accentColor: Colors.blue,
  thumbIconSelected: Icons.volume_up,
  thumbIconUnselected: Icons.volume_off,
  label: const Text('Sound'),
)

Render props

Label reflects selection (HeroUI RenderProps).

RiseSwitch(
  value: on,
  onChanged: (v) => setState(() => on = v),
  label: Text(on ? 'Enabled' : 'Disabled'),
)

Group

Vertical SwitchGroup spacing.

RiseSwitchGroup(
  children: [
    RiseSwitch(
      value: a,
      onChanged: (v) => setState(() => a = v),
      label: const Text('Allow notifications'),
    ),
    RiseSwitch(
      value: b,
      onChanged: (v) => setState(() => b = v),
      label: const Text('Marketing emails'),
    ),
  ],
)

Group horizontal

Horizontal SwitchGroup with scroll.

RiseSwitchGroup(
  orientation: Axis.horizontal,
  spacing: 24,
  children: [
    SizedBox(
      width: 200,
      child: RiseSwitch(
        value: a,
        onChanged: (v) => setState(() => a = v),
        label: const Text('Notifications'),
      ),
    ),
  ],
)