Label

Solidtype_heroui.Label is HeroUI’s label, with the classes HeroUI’s own labelVariants gives. Inside a switch’s, a checkbox’s or a radio’s content it is a <span>, since the content is the clickable label already; inside a Radio Group, but outside a radio, it is Kobalte’s group label, which names the group; inside a TextField, Kobalte’s field label, which names its input; anywhere else it is a <label>. The Switch, Checkbox and Radio Group pages show it in its fields.

Usage

Name

label_usage.mlx

module Input = Solidtype_heroui.Input
module Label = Solidtype_heroui.Label

let make () =
  <div class_="flex flex-col gap-1">
    <Label for_="name">"Name"</Label>
    <Input class_="w-64" id="name" placeholder="Enter your name" type_="text" />
  </div>

Customization

Tailwind CSS

class_ is added after HeroUI’s classes.

Repository

label_tailwind.mlx

module Input = Solidtype_heroui.Input
module Label = Solidtype_heroui.Label

let make () =
  <div class_="flex flex-col gap-1.5">
    <Label
      class_="text-xs font-semibold tracking-wide text-accent uppercase"
      for_="repo">
      "Repository"
    </Label>
    <Input class_="w-64 bg-field" id="repo" placeholder="heroui/react" />
  </div>

Global CSS

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

@layer components {
  .label {
    @apply font-semibold;
  }
}

Styling Reference

CSS Classes

• .label
• States: .label--required, .label--disabled, .label--invalid

API Reference

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

Label

React	solidtype	Type	Description
className	class_	string	Added after HeroUI’s classes
children	children	elements	Its text
isRequired	is_required	bool	Whether it marks its field required
isDisabled	is_disabled	bool	Whether it is shown disabled
isInvalid	is_invalid	bool	Whether it is shown invalid

Label.Slot

How a label renders below a part, given its classes and its children, as React Aria’s LabelContext gives it: Switch.Content and Checkbox.Content make it a <span>, since a label in a label is not HTML, and Radio_group the label that names it.

Beside React

Original HeroUI documentation: Label.