FormField

FormField is a wrapper for input fields like Input and Select. It lets you provide things like labels and helper text.
Source code
import { FormField } from "rfui-package";

#Basic

<FormField label="Name">
  <Input name="name" />
</FormField>

#Helper text

Your first and last name
<FormField label="Name" helperText="Your first and last name">
  <Input name="name" />
</FormField>

#Info popover

It is discouraged to hide information that is needed to complete the form behind a popover. Consider this pattern for supplementary information that is too long for helper text.
<FormField
  label="Name"
  infoPopoverContent="Some long content providing more information about this form field."
>
  <Input name="name" />
</FormField>

#Error text

Invalid name
<FormField label="Name" errorText="Invalid name">
  <Input invalid name="name" />
</FormField>

#Helper and error text

You can include both helper and error text.
Your first and last name
Invalid name
<FormField
  label="Name"
  helperText="Your first and last name"
  errorText="Invalid name"
>
  <Input invalid name="name" />
</FormField>

#Required

Set required to true and requiredIndicator to either "text", "asterisk", or "none".
<Stack className="gap-5">
  <FormField required requiredIndicator="text" label="Name">
    <Input name="name" />
  </FormField>
  <FormField required requiredIndicator="asterisk" label="Name">
    <Input name="name" />
  </FormField>
</Stack>

#Optional

Set required to false and optionalIndicator to either "text", "asterisk", or "none".
<Stack className="gap-5">
  <FormField optionalIndicator="text" label="Name">
    <Input name="name" />
  </FormField>
  <FormField optionalIndicator="asterisk" label="Name">
    <Input name="name" />
  </FormField>
</Stack>

#Size

Set size to "sm", "md", or "lg". Defaults to "md".
First and last name
First and last name
First and last name
<Stack className="gap-5">
  <FormField
    required
    label="Name"
    requiredIndicator="text"
    helperText="First and last name"
    size="sm"
  >
    <Input name="name" size="sm" />
  </FormField>
  <FormField
    required
    label="Name"
    requiredIndicator="text"
    helperText="First and last name"
    size="md"
  >
    <Input name="name" size="md" />
  </FormField>
  <FormField
    required
    label="Name"
    requiredIndicator="text"
    helperText="First and last name"
    size="lg"
  >
    <Input name="name" size="lg" />
  </FormField>
</Stack>

#Width

These examples use className="w-14 max-w-full" and className="w-10" to set the width of the form field.
<Stack className="gap-5">
  <FormField label="Name on card" className="w-14 max-w-full">
    <Input name="name-on-card" />
  </FormField>
  <FormField label="Card number" className="w-14 max-w-full">
    <Input name="card-number" />
  </FormField>
  <FormField label="Expiry date" className="w-10">
    <Input name="expiry-date" />
  </FormField>
  <FormField label="CVC" className="w-10">
    <Input name="cvc" />
  </FormField>
</Stack>

#Input type

FormField is just a wrapper. So far in the above examples we've been passing Input to it but you can pass other input components like Checkbox.
<FormField label="Remember me">
  <Checkbox name="remember-me" />
</FormField>

#Props

PropRequiredDefaultType and notes
label-
string
required-false
boolean
requiredIndicator-"none"
"text" | "asterisk" | "none"
optionalIndicator-"none"
"text" | "asterisk" | "none"
helperText--
string | ReactNode
infoPopoverContent--
string
size-"md"
"sm" | "md" | "lg"
rounded--
"square" | "sm" | "lg" | "full"
Defaults to the value of the CSS variable --default-roundedness. See "Default roundedness".
errorText--
string | ReactNode
...rest--
Omit<ComponentProps<"div">, "size">
See the docs for rest parameters. For FormField, you could pass anything you normally would pass to <div> because the return value looks something like this:
<div {...rest}>
  ...
</div>