Twigs Logo

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

PropTypeDefault
size?
'xs' | 'sm'
'sm'
requiredIndicator?
ReactElement | boolean
false
info?
string | ReactNode
-
rightAddon?
ReactNode
-
containerRef?
React.Ref<HTMLDivElement>
-
as?
React.ElementType
-
css?
object
-