FormHelperText
A component for providing additional context, hints, or error messages to form input fields. Built on top of the Text component with specialized styling for form contexts.
Import
import { FormHelperText } from "@sparrowengg/twigs-react";Usage
const FormHelperTextExample = () => {
return (
<Box css={{ display: "flex", flexDirection: "column", gap: "$4" }}>
<FormHelperText color="info">This is a helpful message for the user</FormHelperText>
<FormHelperText color="error">This is an error message</FormHelperText>
<Input placeholder="password" type="password" />
<FormHelperText>Password should have a minimum length of 6.</FormHelperText>
</Box>
);
};Props
FormHelperText
| Prop | Type | Default |
|---|---|---|
color? | 'error' | 'info' | 'info' |
size? | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xs' |
weight? | 'regular' | 'medium' | 'bold' | 'regular' |
truncate? | boolean | false |
showLines? | number | - |
as? | React.ElementType | - |
css? | object | - |