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>
  <TextField.Label>Email address</TextField.Label>
  <TextField.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>
  <TextField.Label>Password</TextField.Label>
  <TextField.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>

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>
        <TextField.Label>Email address</TextField.Label>
        <TextField.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>
        <TextField.Label>Password</TextField.Label>
        <TextField.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.
`...TextProps`	`TextProps`	-	All standard React Native Text props are supported

DescriptionNew