FormLabel
A component for providing accessible labels for form controls with additional features like required indicators, info tooltips, and right addons.
Import
import { FormLabel } from "@sparrowengg/twigs-react";Usage
const FormLabelExample = () => {
return (
<Box css={{ display: "flex", flexDirection: "column", gap: "$4" }}>
<FormLabel size="sm">Small Label</FormLabel>
<FormLabel size="md">Medium Label</FormLabel>
<FormLabel requiredIndicator={true}>Required Field</FormLabel>
<FormLabel info="This is helpful information">Label with Info</FormLabel>
<FormLabel rightAddon={<Box css={{ color: "$neutral500" }}>Optional</Box>}>
Label with Right Addon
</FormLabel>
</Box>
);
};Props
FormLabel
| Prop | Type | Default |
|---|---|---|
size? | 'xs' | 'sm' | 'sm' |
requiredIndicator? | ReactElement | boolean | false |
info? | string | ReactNode | - |
rightAddon? | ReactNode | - |
containerRef? | React.Ref<HTMLDivElement> | - |
as? | React.ElementType | - |
css? | object | - |
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.
FormInput
A comprehensive form input that combines Input, FormLabel, and FormHelperText components. Provides built-in support for labels, error messages, helper text, character counting, and various styling options.