Switch

Solidtype_heroui.Switch is Kobalte’s switch in HeroUI’s anatomy: the field, Switch.Content, the clickable label that holds Kobalte’s input, Switch.Control and Switch.Thumb, and HeroUI’s Label. Its state is declared as React Aria writes it: Space toggles a switch, and Enter does not.

Usage

Enable notifications

switch_usage.mlx

module Switch = Solidtype_heroui.Switch
module Label = Solidtype_heroui.Label

let make () =
  <Switch>
    <Switch.Content>
      <Switch.Control><Switch.Thumb /></Switch.Control>
      <Label>"Enable notifications"</Label>
    </Switch.Content>
  </Switch>

Examples

Sizes

Small

Medium

Large

switch_sizes.mlx

module Switch = Solidtype_heroui.Switch
module Label = Solidtype_heroui.Label

let make () =
  <div class_="flex gap-6">
    <Switch size=`sm>
      <Switch.Content>
        <Switch.Control><Switch.Thumb /></Switch.Control> <Label>"Small"</Label>
      </Switch.Content>
    </Switch>
    <Switch size=`md>
      <Switch.Content>
        <Switch.Control><Switch.Thumb /></Switch.Control>
        <Label>"Medium"</Label>
      </Switch.Content>
    </Switch>
    <Switch size=`lg>
      <Switch.Content>
        <Switch.Control><Switch.Thumb /></Switch.Control> <Label>"Large"</Label>
      </Switch.Content>
    </Switch>
  </div>

Disabled

Enable notifications

switch_disabled.mlx

module Switch = Solidtype_heroui.Switch
module Label = Solidtype_heroui.Label

let make () =
  <Switch is_disabled=true>
    <Switch.Content>
      <Switch.Control><Switch.Thumb /></Switch.Control>
      <Label>"Enable notifications"</Label>
    </Switch.Content>
  </Switch>

Default Selected

Enable notifications

switch_default_selected.mlx

module Switch = Solidtype_heroui.Switch
module Label = Solidtype_heroui.Label

let make () =
  <Switch default_selected=true>
    <Switch.Content>
      <Switch.Control><Switch.Thumb /></Switch.Control>
      <Label>"Enable notifications"</Label>
    </Switch.Content>
  </Switch>

Controlled

Enable notifications

Switch is off

switch_controlled.mlx

module S = Solidtype.Solid
module Jsx = Solidtype.Jsx
module Switch = Solidtype_heroui.Switch
module Label = Solidtype_heroui.Label

let make () =
  let on, set_on = S.create_signal false in
  <div class_="flex flex-col gap-3">
    <Switch is_selected=(fun () -> S.get on) on_change=(S.set set_on)>
      <Switch.Content>
        <Switch.Control><Switch.Thumb /></Switch.Control>
        <Label>"Enable notifications"</Label>
      </Switch.Content>
    </Switch>
    <p class_="text-sm text-muted">
      "Switch is " (fun () -> Jsx.string (if S.get on then "on" else "off"))
    </p>
  </div>

Without Label

switch_without_label.mlx

module Switch = Solidtype_heroui.Switch

let make () =
  <Switch aria_label="Enable notifications">
    <Switch.Content>
      <Switch.Control><Switch.Thumb /></Switch.Control>
    </Switch.Content>
  </Switch>

Label Position

Label after

Label before

switch_label_position.mlx

module Switch = Solidtype_heroui.Switch
module Label = Solidtype_heroui.Label

let make () =
  <div class_="flex flex-col gap-4">
    <Switch>
      <Switch.Content>
        <Switch.Control><Switch.Thumb /></Switch.Control>
        <Label>"Label after"</Label>
      </Switch.Content>
    </Switch>
    <Switch>
      <Switch.Content>
        <Label>"Label before"</Label>
        <Switch.Control><Switch.Thumb /></Switch.Control>
      </Switch.Content>
    </Switch>
  </div>

Group

Solidtype_heroui.Switch_group lays switches out together, a <div> with the classes HeroUI’s own switchGroupVariants gives; each switch is its own.

Allow Notifications

Marketing emails

Social media updates

switch_group.mlx

module Switch = Solidtype_heroui.Switch
module Switch_group = Solidtype_heroui.Switch_group

let make () =
  <Switch_group>
    <Switch name="notifications">
      <Switch.Content>
        <Switch.Control><Switch.Thumb /></Switch.Control> "Allow Notifications"
      </Switch.Content>
    </Switch>
    <Switch name="marketing">
      <Switch.Content>
        <Switch.Control><Switch.Thumb /></Switch.Control> "Marketing emails"
      </Switch.Content>
    </Switch>
    <Switch name="social">
      <Switch.Content>
        <Switch.Control><Switch.Thumb /></Switch.Control> "Social media updates"
      </Switch.Content>
    </Switch>
  </Switch_group>

Group Horizontal

Allow Notifications

Marketing emails

Social media updates

switch_group_horizontal.mlx

module Switch = Solidtype_heroui.Switch
module Switch_group = Solidtype_heroui.Switch_group

let make () =
  <Switch_group orientation=`horizontal>
    <Switch name="notifications">
      <Switch.Content>
        <Switch.Control><Switch.Thumb /></Switch.Control> "Allow Notifications"
      </Switch.Content>
    </Switch>
    <Switch name="marketing">
      <Switch.Content>
        <Switch.Control><Switch.Thumb /></Switch.Control> "Marketing emails"
      </Switch.Content>
    </Switch>
    <Switch name="social">
      <Switch.Content>
        <Switch.Control><Switch.Thumb /></Switch.Control> "Social media updates"
      </Switch.Content>
    </Switch>
  </Switch_group>

Not yet

HeroUI’s With Icons, With Description and Form Integration, until their parts are ported; and Render Props and Render Function.

Customization

Global CSS

HeroUI’s classes are global, so a stylesheet restyles every one, as with HeroUI in React:

@layer components {
  .switch__control {
    @apply bg-default;
  }
}

Styling Reference

CSS Classes

• .switch, .switch__content, .switch__control, .switch__thumb
• Sizes: .switch--sm, .switch--md, .switch--lg
• Group: .switch-group, .switch-group__items, .switch-group--horizontal, .switch-group--vertical

Interactive States

• Selected: [data-selected="true"], on the field and its content
• Hover: :hover or [data-hovered="true"]
• Focus: :focus-visible or [data-focus-visible="true"]
• Disabled: [data-disabled="true"]
• Pressed: :active or [data-pressed="true"]

API Reference

Each prop beside the name HeroUI’s React component gives it.

Switch

React	solidtype	Type	Default	Description
size	size	[ `sm | `md | `lg ]	`md	Size
isSelected	is_selected	bool		Whether it is on, controlled
defaultSelected	default_selected	bool	false	Whether it starts on
onChange	on_change	bool -> unit		Called as it is toggled
isDisabled	is_disabled	bool	false	Whether it is disabled
className	class_	string		Added after HeroUI’s classes
onBlur	on_blur	Dom.focusEvent -> unit		Called once focus leaves it for an element outside it
children	children	elements		Its content, and its control
isReadOnly	is_read_only	bool	false	Whether it keeps its state
isRequired	is_required	bool	false	Whether a form requires it
name	name	string		Its name in a form
value	value	string		Its value in a form, while it is on
aria-label	aria_label	string		Its name where no label names it
isInvalid	is_invalid	bool	false	Whether it is invalid

Switch.Content, Switch.Control and Switch.Thumb

React	solidtype	Type	Description
className	class_	string	Added after HeroUI’s class
children	children	elements	What it holds; not the thumb’s

SwitchGroup

React	solidtype	Type	Default	Description
orientation	orientation	[ `horizontal | `vertical ]	`vertical	How its switches are laid out
className	class_	string		Added after HeroUI’s classes
children	children	elements		Its switches

Beside React

Original HeroUI documentation: Switch.

The same HeroUI Switch twice, under the same props: in solidtype on the left, in React on the right. Below them, every attribute of the two contents: a marked row is one they disagree on, and a dimmed row is a framework’s own, which no style reads.

disabled

solidtype — OCaml, on Solid and Kobalte

Wi-Fi

React — TypeScript, on React Aria

attribute	solidtype	React