FormField

Source code
import { FormField } from "rfui";

#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".
Note: value isn't passed as a prop; it's passed instead like this: <Textarea>{value}</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

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