CheckboxGroup

Solidtype_heroui.Checkbox_group is a <div role="group"> of Checkboxes, with the classes HeroUI’s own checkboxGroupVariants gives, that keeps the values its checkboxes check, controlled or its own. Kobalte has checkboxes but no group of them: the group is built on Kobalte’s checkboxes, each its own Checkbox.Root, which the group checks and is told of. Its label names it and its description describes it and each checkbox, as React Aria’s do; a checkbox’s own description describes it alone.

Usage

Select your interestsChoose all that apply

CodingLove building software

DesignEnjoy creating beautiful interfaces

WritingPassionate about content creation

checkbox_group_usage.mlx

module Checkbox = Solidtype_heroui.Checkbox
module Checkbox_group = Solidtype_heroui.Checkbox_group
module Description = Solidtype_heroui.Description
module Label = Solidtype_heroui.Label

let make () =
  <Checkbox_group name="interests">
    <Label>"Select your interests"</Label>
    <Description>"Choose all that apply"</Description>
    <Checkbox value="coding">
      <Checkbox.Content>
        <Checkbox.Control><Checkbox.Indicator /></Checkbox.Control> "Coding"
      </Checkbox.Content>
      <Description>"Love building software"</Description>
    </Checkbox>
    <Checkbox value="design">
      <Checkbox.Content>
        <Checkbox.Control><Checkbox.Indicator /></Checkbox.Control> "Design"
      </Checkbox.Content>
      <Description>"Enjoy creating beautiful interfaces"</Description>
    </Checkbox>
    <Checkbox value="writing">
      <Checkbox.Content>
        <Checkbox.Control><Checkbox.Indicator /></Checkbox.Control> "Writing"
      </Checkbox.Content>
      <Description>"Passionate about content creation"</Description>
    </Checkbox>
  </Checkbox_group>

Examples

In Surface

`secondary is the variant for a group on a surface; each checkbox takes it.

Notifications

Email

SMS

Push notifications

checkbox_group_surface.mlx

module Checkbox = Solidtype_heroui.Checkbox
module Checkbox_group = Solidtype_heroui.Checkbox_group
module Description = Solidtype_heroui.Description
module Label = Solidtype_heroui.Label
module Surface = Solidtype_heroui.Surface

let make () =
  <Surface class_="w-full max-w-sm rounded-3xl p-6">
    <Checkbox_group name="notifications" variant=`secondary>
      <Label>"Notifications"</Label>
      <Checkbox value="email">
        <Checkbox.Content>
          <Checkbox.Control><Checkbox.Indicator /></Checkbox.Control> "Email"
        </Checkbox.Content>
      </Checkbox>
      <Checkbox value="sms">
        <Checkbox.Content>
          <Checkbox.Control><Checkbox.Indicator /></Checkbox.Control> "SMS"
        </Checkbox.Content>
      </Checkbox>
      <Checkbox value="push">
        <Checkbox.Content>
          <Checkbox.Control><Checkbox.Indicator /></Checkbox.Control>
          "Push notifications"
        </Checkbox.Content>
      </Checkbox>
    </Checkbox_group>
  </Surface>

Disabled

FeaturesFeature selection is temporarily disabled

Feature 1This feature is coming soon

Feature 2This feature is coming soon

checkbox_group_disabled.mlx

module Checkbox = Solidtype_heroui.Checkbox
module Checkbox_group = Solidtype_heroui.Checkbox_group
module Description = Solidtype_heroui.Description
module Label = Solidtype_heroui.Label

let make () =
  <Checkbox_group is_disabled=true name="disabled-features">
    <Label>"Features"</Label>
    <Description>"Feature selection is temporarily disabled"</Description>
    <Checkbox value="feature1">
      <Checkbox.Content>
        <Checkbox.Control><Checkbox.Indicator /></Checkbox.Control> "Feature 1"
      </Checkbox.Content>
      <Description>"This feature is coming soon"</Description>
    </Checkbox>
    <Checkbox value="feature2">
      <Checkbox.Content>
        <Checkbox.Control><Checkbox.Indicator /></Checkbox.Control> "Feature 2"
      </Checkbox.Content>
      <Description>"This feature is coming soon"</Description>
    </Checkbox>
  </Checkbox_group>

Controlled

Your skills

Coding

Design

Writing

Selected: coding, design

checkbox_group_controlled.mlx

module S = Solidtype.Solid
module Jsx = Solidtype.Jsx
module Checkbox = Solidtype_heroui.Checkbox
module Checkbox_group = Solidtype_heroui.Checkbox_group
module Description = Solidtype_heroui.Description
module Label = Solidtype_heroui.Label

let make () =
  let selected, set_selected = S.create_signal [ "coding"; "design" ] in
  <Checkbox_group
    class_="min-w-[320px]"
    name="skills"
    value=(fun () -> S.get selected)
    on_change=(S.set set_selected)>
    <Label>"Your skills"</Label>
    <Checkbox value="coding">
      <Checkbox.Content>
        <Checkbox.Control><Checkbox.Indicator /></Checkbox.Control> "Coding"
      </Checkbox.Content>
    </Checkbox>
    <Checkbox value="design">
      <Checkbox.Content>
        <Checkbox.Control><Checkbox.Indicator /></Checkbox.Control> "Design"
      </Checkbox.Content>
    </Checkbox>
    <Checkbox value="writing">
      <Checkbox.Content>
        <Checkbox.Control><Checkbox.Indicator /></Checkbox.Control> "Writing"
      </Checkbox.Content>
    </Checkbox>
    <Label class_="my-4 text-sm text-muted">
      (fun () ->
        Jsx.string
          ("Selected: "
          ^
          match S.get selected with
          | [] -> "None"
          | values -> String.concat ", " values))
    </Label>
  </Checkbox_group>

Not yet

HeroUI’s Validation example validates the group on a form’s submission, by React Aria’s native validation, which is not ported yet; is_invalid marks it.

Styling Reference

CSS Classes

• .checkbox-group, and .checkbox-group--primary, .checkbox-group--secondary

Interactive States

• Disabled: [data-disabled="true"]
• Invalid: [data-invalid="true"]

API Reference

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

CheckboxGroup

React	solidtype	Type	Default	Description
variant	variant	[ `primary | `secondary ]	`primary	Its checkboxes’ variant, where they set none
value	value	string list		The values checked, controlled
defaultValue	default_value	string list	[]	The values checked at first, kept by itself
onChange	on_change	string list -> unit		Told the values checked as they change
isDisabled	is_disabled	bool		Whether it is disabled, else as its fieldset is
isInvalid	is_invalid	bool	false	Whether it is invalid
isReadOnly	is_read_only	bool	false	Whether its values are kept as they are
isRequired	is_required	bool	false	Whether a value must be checked
name	name	string		Its checkboxes’ name in a form
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 label, description and checkboxes

Beside React

Original HeroUI documentation: CheckboxGroup.

The same HeroUI CheckboxGroup twice, under the same props: in solidtype on the left, in React on the right. Below them, every attribute of the two groups: a marked row is one they disagree on.

disabledinvalid

solidtype — OCaml, on Solid and Kobalte

Interests

Coding

Design

React — TypeScript, on React Aria

attribute	solidtype	React