Skip to content
Lenso UI

Description

Provides supplementary text for form fields and other components

Usage

import { Description } from '@lenso/ui';
"use client";// Adapted from HeroUI v3.2.6, Apache-2.0.import { Description, Input, Label } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";import { useId } from "react";import { demoStyles } from "../../demo.stylex";
export function Basic() {  const id = useId();  return (    <div {...stylex.props(demoStyles.column)}>      <Label htmlFor={id}>Email</Label>      <Input        aria-describedby={`${id}-description`}        xstyle={demoStyles.field}        id={id}        placeholder="[email protected]"        type="email"      />      <Description id={`${id}-description`}>        We'll never share your email with anyone else.      </Description>    </div>  );}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Examples

With Form Fields

<div className="flex flex-col gap-1">  <Label htmlFor="password">Password</Label>  <Input id="password" type="password" aria-describedby="password-description" />  <Description id="password-description">    Must be at least 8 characters with one uppercase letter  </Description></div>

Integration with TextField

import {TextField, Label, Input, Description} from '@lenso/ui';
<TextField type="email">  <Label>Email</Label>  <Input placeholder="Enter your email" />  <Description>We'll never share your email</Description></TextField>

When using the TextField component, accessibility attributes are automatically applied to the label and description.

Customization

Tailwind CSS

"use client";// Adapted from HeroUI v3.2.6, e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e, Apache-2.0.import { Description, Input, Label } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";import { useId } from "react";
const styles = stylex.create({  layout: { display: "flex", width: 256, maxWidth: "100%", flexDirection: "column", gap: 4 },  description: { lineHeight: 1.625, letterSpacing: "0.025em" },});
export function CustomStyles() {  const id = useId();  const hint = useId();  return (    <div {...stylex.props(styles.layout)}>      <Label htmlFor={id}>Workspace URL</Label>      <Input id={id} aria-describedby={hint} placeholder="acme" type="text" />      <Description xstyle={styles.description} id={hint}>        Lowercase letters and hyphens only. Used in app.heroui.com/acme      </Description>    </div>  );}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Global CSS

To customize the Description component classes, you can use the @layer components directive. Learn more.

@layer components {  .description {    @apply text-muted;  }}

Styling Reference

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The Description component uses these CSS classes (View source styles):

Base Classes [!toc]

  • .description - Base description styles with muted text color

API Reference

Description

PropTypeDefaultDescription
classNamestring-Additional CSS classes
childrenReactNode-The content of the description

Accessibility

The Description component enhances accessibility by:

  • Using semantic HTML that screen readers can identify
  • Providing the slot="description" attribute for React Aria integration
  • Supporting proper text contrast ratios
TextField

Composition-friendly text fields with labels, descriptions, and inline validation

Input

Primitive single-line text input component that accepts standard HTML attributes

TextArea

Primitive multiline text input component that accepts standard HTML attributes