# Description **Category**: native **URL**: https://www.heroui.com/docs/native/components/description **Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/native/components/(forms)/description.mdx > Text component for providing accessible descriptions and helper text for form fields and other UI elements. *** ## Import ```tsx import { Description } from 'heroui-native'; ``` ## Anatomy ```tsx ... ``` - **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. ```tsx This is a helpful description. ``` ### With Form Fields Provide accessible descriptions for form fields using the `nativeID` prop. ```tsx We'll never share your email with anyone else. ``` ### Accessibility Linking Link descriptions to form fields for screen reader support by using `nativeID` and `aria-describedby`. ```tsx Use at least 8 characters with a mix of letters, numbers, and symbols. ``` ### Hiding on Invalid State Control whether the description should be hidden when the form field is invalid using the `hideOnInvalid` prop. ```tsx We'll never share your email with anyone else. Please enter a valid email address ``` 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 ```tsx import { Description, TextField } from 'heroui-native'; import { View } from 'react-native'; export default function DescriptionExample() { return ( We'll never share your email with anyone else. Use at least 8 characters with a mix of letters, numbers, and symbols. ); } ``` You can find more examples in the [GitHub repository](). ## API Reference ### Description | 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 |