Helper Text

The Helper Text component provides you with form helper text and descriptions.

Import

import { HelperText } from '@nostromo/ui-core'
// or
import { HelperText } from '@nostromo/ui-core/helper-text'

Usage

import { HelperText, Input } from '@nostromo/ui-core'
 
export default function Example() {
  return (
    <div className="space-y-2">
      <Input type="password" />
      <HelperText>Password must be at least 8 characters long</HelperText>
    </div>
  )
}

Live Examples

Live Example

☀️

Copy

Storybook →

View Code

import { HelperText, Input } from '@nostromo/ui-core' export default function HelperTextExample() { return ( <div className="space-y-2"> <Input type="password" placeholder="Enter password" /> <HelperText>Password must be at least 8 characters long</HelperText> </div> ) }...

Props

Prop	Type	Default	Required	Description
`variant`	`"default" \| "muted" \| "error"`	`"default"`	No	Visual variant
`size`	`"sm" \| "default" \| "lg"`	`"default"`	No	Size of the helper text
`className`	`string`	`undefined`	No	Additional CSS classes
`children`	`React.ReactNode`	`undefined`	No	Helper text content

Standard HTML Props

The HelperText component extends React.HTMLAttributes<HTMLDivElement>, so it accepts all standard HTML div attributes (e.g., id, data-*, aria-*).

Label ErrorMessage