Fieldset

Related fields, with a legend and their actions.

Solidtype_heroui.Fieldset is a <fieldset> with the classes HeroUI’s own fieldsetVariants gives, its legend, the group of its fields and its actions. Kobalte has no fieldset. While it is disabled, it gives the buttons, links and radio groups inside it the state, as HeroUI’s gives React Aria’s: the browser disables a native button or input inside a disabled fieldset, but neither a group nor the state HeroUI’s styles read.

Usage

module Button = Solidtype_heroui.Button
module Description = Solidtype_heroui.Description
module Fieldset = Solidtype_heroui.Fieldset
module Input = Solidtype_heroui.Input
module Label = Solidtype_heroui.Label
module Text_area = Solidtype_heroui.Text_area
module Text_field = Solidtype_heroui.Text_field

external prevent_default : Dom.event -> unit = "preventDefault" [@@mel.send]

let make () =
  <form class_="w-full max-w-96" on_submit=(fun e -> prevent_default e)>
    <Fieldset>
      <Fieldset.Legend>"Profile Settings"</Fieldset.Legend>
      <Description>"Update your profile information."</Description>
      <Fieldset.Group>
        <Text_field is_required=true name="name">
          <Label>"Name"</Label> <Input placeholder="John Doe" />
        </Text_field>
        <Text_field is_required=true name="email">
          <Label>"Email"</Label>
          <Input type_="email" placeholder="john@example.com" />
        </Text_field>
        <Text_field is_required=true name="bio">
          <Label>"Bio"</Label>
          <Text_area placeholder="Tell us about yourself..." />
          <Description>"Minimum 10 characters"</Description>
        </Text_field>
      </Fieldset.Group>
      <Fieldset.Actions>
        <Button type_=`submit>"Save changes"</Button>
        <Button type_=`reset variant=`secondary>"Cancel"</Button>
      </Fieldset.Actions>
    </Fieldset>
  </form>

Anatomy

<Fieldset>
  <Fieldset.Legend>"Profile"</Fieldset.Legend>
  <Fieldset.Group>(* its fields *)</Fieldset.Group>
  <Fieldset.Actions>(* its buttons *)</Fieldset.Actions>
</Fieldset>

Examples

In Surface

Profile SettingsUpdate your profile information.

Name

BioMinimum 10 characters

module Button = Solidtype_heroui.Button
module Description = Solidtype_heroui.Description
module Fieldset = Solidtype_heroui.Fieldset
module Input = Solidtype_heroui.Input
module Label = Solidtype_heroui.Label
module Text_area = Solidtype_heroui.Text_area
module Text_field = Solidtype_heroui.Text_field
module Surface = Solidtype_heroui.Surface

let make () =
  <div class_="flex items-center justify-center rounded-3xl bg-surface p-6">
    <Surface class_="w-full min-w-[380px]">
      <Fieldset class_="w-full">
        <Fieldset.Legend>"Profile Settings"</Fieldset.Legend>
        <Description>"Update your profile information."</Description>
        <Fieldset.Group>
          <Text_field is_required=true name="name">
            <Label>"Name"</Label>
            <Input placeholder="John Doe" variant=`secondary />
          </Text_field>
          <Text_field is_required=true name="email">
            <Label>"Email"</Label>
            <Input
              type_="email" placeholder="john@example.com" variant=`secondary
            />
          </Text_field>
          <Text_field is_required=true name="bio">
            <Label>"Bio"</Label>
            <Text_area
              placeholder="Tell us about yourself..." variant=`secondary
            />
            <Description>"Minimum 10 characters"</Description>
          </Text_field>
        </Fieldset.Group>
        <Fieldset.Actions>
          <Button type_=`submit>"Save changes"</Button>
          <Button type_=`reset variant=`tertiary>"Cancel"</Button>
        </Fieldset.Actions>
      </Fieldset>
    </Surface>
  </div>

Disabled

A component’s own is_disabled is its own: the fieldset’s Help button stays enabled.

Disable the fieldset

Notifications

module S = Solidtype.Solid
module Button = Solidtype_heroui.Button
module Description = Solidtype_heroui.Description
module Fieldset = Solidtype_heroui.Fieldset
module Input = Solidtype_heroui.Input
module Label = Solidtype_heroui.Label
module Text_area = Solidtype_heroui.Text_area
module Text_field = Solidtype_heroui.Text_field
module Switch = Solidtype_heroui.Switch

let make () =
  let disabled, set_disabled = S.create_signal true in
  <div class_="flex w-full max-w-96 flex-col gap-4">
    <Switch
      is_selected=(fun () -> S.get disabled) on_change=(S.set set_disabled)>
      <Switch.Content>
        <Switch.Control><Switch.Thumb /></Switch.Control>
        <Label>"Disable the fieldset"</Label>
      </Switch.Content>
    </Switch>
    <Fieldset disabled=(fun () -> S.get disabled)>
      <Fieldset.Legend>"Notifications"</Fieldset.Legend>
      <Fieldset.Group>
        <Text_field name="address">
          <Label>"Email"</Label>
          <Input type_="email" placeholder="john@example.com" />
        </Text_field>
      </Fieldset.Group>
      <Fieldset.Actions>
        <Button>"Save"</Button>
        <Button is_disabled=false variant=`secondary>"Help"</Button>
      </Fieldset.Actions>
    </Fieldset>
  </div>

Not yet

HeroUI’s examples validate each field by React Aria’s validate in a React Aria Form, which are not ported yet; the port’s are a <form> of required fields.

Customization

Global CSS

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

@layer components {
  .fieldset {
    @apply gap-6 rounded-lg border p-6;
  }

  .fieldset__legend {
    @apply text-2xl font-bold;
  }
}

Styling Reference

CSS Classes

.fieldset, .fieldset__legend, .fieldset__field-group, .fieldset__actions

Interactive States

Disabled: [data-disabled="true"], from which HeroUI’s styles show the fields inside disabled

API Reference

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

Fieldset

React	solidtype	Type	Default	Description
`disabled`	`disabled`	`bool`	`false`	Whether it and what is inside it are disabled
`name`	`name`	`string`		Its name in a form
`className`	`class_`	`string`		Added after HeroUI’s classes
`children`	`children`	elements		Its legend, groups and actions

Fieldset.Legend, Fieldset.Group, Fieldset.Actions

React	solidtype	Type	Description
`className`	`class_`	`string`	Added after HeroUI’s class
`children`	`children`	elements	Its content

Beside React

Original HeroUI documentation: Fieldset.

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

disabled

solidtype — OCaml, on Solid and Kobalte

Profile

React — TypeScript, on React Aria

attribute	solidtype	React