#Basic

<FormField label="Name" />

#Controlled

<FormField label="Name" value={value} inputRest={{ onInput: onInput }} />

#Helper text

Set helperText to a string to render helper text above the form field.
Your first and last name
<FormField label="Name" helperText="Your first and last name" />

#Invalid

Set invalid to either true or false. Defaults to false.
<FormField label="Name" invalid />

#Error text

When invalid is true, set errorText to a string to render error text above the form field.
Invalid name
<FormField label="Name" invalid errorText="Invalid name" />

#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"
  invalid
  errorText="Invalid name"
/>

#Required

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

#Optional

Set required to false and optionalIndicator to either "text", "asterisk", or "none".
<Stack class="gap-5">
  <FormField
    label="Name"
    optionalIndicator="text"
  />
  <FormField
    label="Name"
    optionalIndicator="asterisk"
  />
</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 class="gap-5">
  <FormField
    label="Name"
    size="sm"
    required
    requiredIndicator="text"
    helperText="First and last name"
  />
  <FormField
    label="Name"
    size="md"
    required
    requiredIndicator="text"
    helperText="First and last name"
  />
  <FormField
    label="Name"
    size="lg"
    required
    requiredIndicator="text"
    helperText="First and last name"
  />
</Stack>

#Width

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

#Type

type usually gets passed to Input. However, for some of the values a component other than Input is used. See the examples in the following sections.
RFUI's Input component wraps the native HTML input and passes type to input, and so you could find the possible values documented here on MDN. If you are thinking of using number, consider taking this approach instead.
<Stack class="gap-5">
  <FormField label="Name" type="text" />
  <FormField label="Email" type="email" />
  <FormField label="Age" type="number" />
  <FormField label="Password" type="password" value="foobar" />
  <FormField label="Birthday" type="date" />
  <FormField label="Appointment" type="datetime-local" />
  <FormField label="Bed time" type="time" />
  <FormField label="Profile photo" type="file" />
  <FormField label="Mood" type="range" />
  <FormField label="Favorite color" type="color" />
</Stack>

#Checkbox

If you pass type="checkbox" it will use RFUI's Checkbox component instead of doing <Input type="checkbox" />.
<FormField label="Agreed" type="checkbox" />

#Switch

If you pass type="switch" it will use RFUI's Switch.
<FormField label="Agreed" type="switch" />

#PasswordInput

To use PasswordInput with FormField set type to "rfui-password-input".
<FormField label="Password" type="rfui-password-input" value="foobar" />

#Textarea

To use Textarea with FormField set type to "textarea".
<FormField label="Notes" type="textarea" />

#RadioButtonGroup

To use RadioButtonGroup with FormField set type to "radio-button-group" and use radioButtonGroupOptions like so:
<FormField
  label="Plan"
  type="radio-button-group"
  name="plan"
  radioButtonGroupOptions={[
    { value: "free", display: "Free" },
    { value: "basic", display: "Basic" },
    { value: "premium", display: "Premium" },
  ]}
/>

#Select

To use Select with FormField set type to "select" and use selectOptions like so:
<FormField
  label="Country"
  type="select"
  selectOptions={[
    { value: "united-states", display: "United States" },
    { value: "france", display: "France" },
    { value: "japan", display: "Japan" },
  ]}
/>

#Props

label*
Required
true
Type
string
Default
none
name
Required
false
Type
ComponentProps<"input">["name"]
Default
none
value
Required
false
Type
ComponentProps<"input">["value"]
Default
none
type
Required
false
Type
ComponentProps<"input">["type"] | "rfui-password-input"
Default
none
required
Required
false
Type
boolean
Default
false
requiredIndicator
Required
false
Type
"text" | "asterisk" | "none"
Default
"none"
Notes
optionalIndicator
Required
false
Type
"text" | "asterisk" | "none"
Default
"none"
Notes
helperText
Required
false
Type
string
Default
none
size
Required
false
Type
"sm" | "md" | "lg"
Default
"md"
rounded
Required
false
Type
"square" | "sm" | "lg" | "full"
Default
none
Notes
Defaults to the value of the CSS variable --default-roundedness. See "Default roundedness".
invalid
Required
false
Type
boolean
Default
false
errorText
Required
false
Type
string
Default
none
radioButtonGroupOptions
Required
false
Type
{ value: string; display: string; }[]
Default
none
Notes
This is to be used to be used to construct <input type="radio"> elements when you have type="radio-button-group".
selectOptions
Required
false
Type
{ value: string; display: string; }[]
Default
none
Notes
This is to be used to be used to construct <option> elements when you have type="select".
inputRest
Required
false
Type
Omit<ComponentProps<"input">, "name" | "value" | "type" | "required" | "size" | "rounded" | "invalid">
Default
none
Notes
The structure of FormField is something like this:
<div>
  ...
  <Input />
</div>
inputRest gets passed like this:
<Input {...inputRest} />
textareaRest
Required
false
Type
Omit<TextareaType, "id" | "name" | "value" | "required" | "invalid">
Default
none
Notes
The structure of FormField when used with type="textarea" is something like this:
<div>
  ...
  <Textarea></Textarea>
</div>
textareaRest gets passed like this:
<Textarea {...textareaRest}></Textarea>
radioButtonGroupRest
Required
false
Type
Omit<RadioButtonGroupType, "id" | "name" | "value" | "required" | "invalid">
Default
none
Notes
The structure of FormField when used with type="radio-button-group" is something like this:
<div>
  ...
  <RadioButtonGroup></RadioButtonGroup>
</div>
radioButtonGroupRest gets passed like this:
<RadioButtonGroup {...radioButtonGroupRest}></RadioButtonGroup>
selectRest
Required
false
Type
Omit<SelectType, "id" | "name" | "value" | "required" | "invalid">
Default
none
Notes
The structure of FormField when used with type="select" is something like this:
<div>
  ...
  <Select></Select>
</div>
selectRest gets passed like this:
<Select {...selectRest}></Select>
...rest
Required
false
Type
Omit<ComponentProps<"div">, "size">
Default
none
Notes
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>