Description

Import

import { Description } from 'heroui-native';

Anatomy

<Description>...</Description>

Description: Text component that displays description or helper text with muted styling. Can be linked to form fields via nativeID for accessibility support.

Usage

Basic Usage

Display description text with default muted styling.

<Description>This is a helpful description.</Description>

With Form Fields

Provide accessible descriptions for form fields using the nativeID prop.

<TextField>
  <Label>Email address</Label>
  <Input
    placeholder="Enter your email"
    keyboardType="email-address"
    autoCapitalize="none"
  />
  <Description nativeID="email-desc">
    We'll never share your email with anyone else.
  </Description>
</TextField>

Accessibility Linking

Link descriptions to form fields for screen reader support by using nativeID and aria-describedby.

<TextField>
  <Label>Password</Label>
  <Input
    placeholder="Create a password"
    secureTextEntry
    aria-describedby="password-desc"
  />
  <Description nativeID="password-desc">
    Use at least 8 characters with a mix of letters, numbers, and symbols.
  </Description>
</TextField>

Hiding on Invalid State

Control whether the description should be hidden when the form field is invalid using the hideOnInvalid prop.

<TextField isInvalid={isInvalid}>
  <Label>Email</Label>
  <Input placeholder="Enter your email" />
  <Description hideOnInvalid>
    We'll never share your email with anyone else.
  </Description>
  <FieldError>Please enter a valid email address</FieldError>
</TextField>

When hideOnInvalid is true, the description will be hidden when the field is invalid. When false (default), the description remains visible even when invalid.

Example

import { Description, TextField } from 'heroui-native';
import { View } from 'react-native';

export default function DescriptionExample() {
  return (
    <View className="flex-1 justify-center px-5 gap-8">
      <TextField>
        <Label>Email address</Label>
        <Input
          placeholder="Enter your email"
          keyboardType="email-address"
          autoCapitalize="none"
        />
        <Description nativeID="email-desc">
          We'll never share your email with anyone else.
        </Description>
      </TextField>
      <TextField>
        <Label>Password</Label>
        <Input placeholder="Create a password" secureTextEntry />
        <Description nativeID="password-desc">
          Use at least 8 characters with a mix of letters, numbers, and symbols.
        </Description>
      </TextField>
    </View>
  );
}

You can find more examples in the GitHub repository.

API Reference

prop	type	default	description
`children`	`React.ReactNode`	-	Description text content
`className`	`string`	-	Additional CSS classes to apply
`nativeID`	`string`	-	Native ID for accessibility. Used to link description to form fields via aria-describedby.
`isInvalid`	`boolean`	-	Whether the description is in an invalid state (overrides context)
`isDisabled`	`boolean`	-	Whether the description is disabled (overrides context)
`hideOnInvalid`	`boolean`	`false`	Whether to hide the description when invalid
`animation`	`DescriptionAnimation \| undefined`	-	Animation configuration for description transitions
`...TextProps`	`TextProps`	-	All standard React Native Text props are supported

DescriptionUpdated