Description

Solidtype_heroui.Description is HeroUI’s description, with the classes HeroUI’s own descriptionVariants gives. It is a <span>, unless a part above it gives it its element, as React Aria’s do: inside a Radio Group it is Kobalte’s group description, which the group is described by, and inside a radio the radio’s, which its input is described by. The Radio Group page shows it in its fields.

Usage

EmailWe'll never share your email with anyone else.

description_usage.mlx

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

let make () =
  <div class_="flex flex-col gap-1">
    <Label for_="email">"Email"</Label>
    <Input
      aria_describedby="email-description"
      class_="w-64"
      id="email"
      placeholder="you@example.com"
      type_="email"
    />
    <Description id="email-description">
      "We'll never share your email with anyone else."
    </Description>
  </div>

Customization

Tailwind CSS

class_ is added after HeroUI’s classes.

Workspace URLLowercase letters and hyphens only. Used in app.heroui.com/acme

description_tailwind.mlx

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

let make () =
  <div class_="flex w-64 flex-col gap-1">
    <Label for_="workspace-slug">"Workspace URL"</Label>
    <Input id="workspace-slug" placeholder="acme" type_="text" />
    <Description
      class_="leading-relaxed tracking-wide" id="workspace-slug-hint">
      "Lowercase letters and hyphens only. Used in app.heroui.com/acme"
    </Description>
  </div>

Styling Reference

CSS Classes

• .description

API Reference

React	solidtype	Type	Description
className	class_	string	Added after HeroUI’s classes
children	children	elements	Its text

Description.Slot

How a description renders below a part, given its classes and its children, as React Aria’s TextContext gives it.

Beside React

Original HeroUI documentation: Description.