Form

A form component built on react-hook-form, with validation, error handling, and layout support.

Import

import { Form, FormTextInput, FormSelect } from '@flxui/uikit/business'

Basic Usage

import { Form, FormTextInput, FormSelect } from '@flxui/uikit/business'
 
function Demo() {
  const handleSubmit = (data) => {
    console.log(data)
  }
 
  return (
    <Form onSubmit={handleSubmit}>
      <FormTextInput name="username" label="Username" required />
      <FormTextInput name="email" label="Email" type="email" required />
      <FormSelect name="role" label="Role" data={['Admin', 'User', 'Guest']} />
    </Form>
  )
}

With Validation

Pass rules (a standard react-hook-form RegisterOptions object) to any Form* field:

<Form onSubmit={(data) => console.log(data)} defaultValues={{ email: '' }}>
  <FormTextInput
    name="email"
    label="Email"
    rules={{
      required: 'Email is required',
      pattern: {
        value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
        message: 'Invalid email address'
      }
    }}
  />
</Form>

With Zod Validation

Form doesn’t expose a resolver prop directly, so you can’t pass a Zod schema straight to <Form>. Instead, build your own useForm() with zodResolver and hand it to Form via the form prop — the same escape hatch documented under Form Props for bringing your own form instance:

import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'
import { Form, FormTextInput, FormNumberInput } from '@flxui/uikit/business'
 
const schema = z.object({
  email: z.string().email('Enter a valid email address'),
  age: z.number().min(18, 'Must be at least 18')
})
 
type FormValues = z.infer<typeof schema>
 
function Demo() {
  const form = useForm<FormValues>({
    resolver: zodResolver(schema),
    defaultValues: { email: '', age: 18 }
  })
 
  return (
    <Form form={form} onSubmit={(data) => console.log(data)}>
      <FormTextInput name="email" label="Email" />
      <FormNumberInput name="age" label="Age" />
    </Form>
  )
}

Horizontal Layout

<Form layout="horizontal" onSubmit={(data) => console.log(data)}>
  <FormTextInput name="firstName" label="First Name" />
  <FormTextInput name="lastName" label="Last Name" />
</Form>

layout also accepts 'none', which skips the Flex wrapper entirely and renders children as-is — useful when you’re composing your own layout around the fields.

Without Actions

import { Form, FormTextInput } from '@flxui/uikit/business'
import { Button } from '@flxui/uikit'
 
function Demo() {
  return (
    <Form withActions={false} onSubmit={(data) => console.log(data)}>
      <FormTextInput name="search" label="Search" />
      <Button type="submit">Search</Button>
    </Form>
  )
}

Custom Actions

<Form
  onSubmit={(data) => console.log(data)}
  onCancel={() => console.log('cancelled')}
  actionsProps={{
    cancelText: 'Reset',
    confirmText: 'Save Changes'
  }}
>
  <FormTextInput name="name" label="Name" />
</Form>

With Error Message

errorMessage isn’t just a plain string prop for display — passing it is equivalent to what Form sets internally when your onSubmit handler throws. It’s rendered through an Alert and run through DOMPurify.sanitize, so basic HTML is allowed:

<Form errorMessage="Failed to submit form. Please try again." onSubmit={(data) => console.log(data)}>
  <FormTextInput name="name" label="Name" />
</Form>

Compound API

Form also exposes its building blocks as static properties, in case you want to assemble a custom layout instead of using Form’s built-in layout/withActions props:

<Form.Layout layout="horizontal">
  <FormTextInput name="firstName" label="First Name" />
</Form.Layout>
 
<Form.Actions cancelText="Reset" confirmText="Save" />
 
<Form.ErrorMessage message="Something went wrong" />

Form Props

FormActions Props

Also accepts all FlexProps (the actions row is a Flex with justify="flex-end").

FormErrorMessage Props

Also accepts all AlertProps except children.

Form Field Components

The fields below all follow the same shape: a name prop that maps to a react-hook-form field, an optional rules prop for validation, and — for most of them — an automatically-rendered error message wired up via getFieldState. They must be used inside a Form (or any FormProvider), since they call useFormContext() internally.

FormCheckbox

import { FormCheckbox } from '@flxui/uikit/business'
 
;<FormCheckbox name="agree" label="I agree to the terms" />

Also accepts all CheckboxProps.

FormCheckboxGroup

Renders a set of checkboxes from a data array, with a single validation state for the group:

<FormCheckboxGroup
  name="fruits"
  label="Favorite fruits"
  data={[
    { value: 'apple', label: 'Apple' },
    { value: 'banana', label: 'Banana' }
  ]}
/>

Also accepts all CheckboxGroupProps except children.

FormDatePicker

<FormDatePicker name="startDate" label="Start date" />

Also accepts all DatePickerProps.

FormMultiSelect

<FormMultiSelect name="tags" label="Tags" data={['React', 'Vue', 'Svelte']} />

Also accepts all MultiSelectProps (including data).

FormNumberInput

<FormNumberInput name="quantity" label="Quantity" min={0} />

Also accepts all NumberInputProps.

FormTimeRangePicker

<FormTimeRangePicker name="range" label="Time range" clearable />

Also accepts all TimeRangePickerBaseProps. No built-in error rendering — see the callout above.

FormPhoneInput

A single phone number input, formatted using the package’s built-in country dial-code masks:

<FormPhoneInput name="phone" label="Phone number" />

Also accepts all PhoneInputProps except onSelect.

FormPhoneInputV2

Pairs a country FormSelect with a FormPhoneInput, side by side, with a single consolidated error message for both fields:

<FormPhoneInputV2 countryKey="country" phoneKey="phone" selectProps={{ placeholder: 'Country' }} />

Also accepts all PhoneInputProps except onSelect.

FormCopyText

<FormCopyText value="sk-live-abc123..." />

Also accepts all BoxProps.

FormTextInput

<FormTextInput name="username" label="Username" />

Also accepts all TextInputProps. The field’s value defaults to '' when the underlying react-hook-form value is undefined, so TextInput stays controlled from the first render even before the field has been touched.

FormPasswordInput

<FormPasswordInput name="password" label="Password" />

Also accepts all PasswordInputProps. It ships its own default classNames (wrapper, input, visibility toggle, etc.); any classNames you pass are merged in per-key, so overriding e.g. classNames.input won’t affect the others.

FormTextareaInput

<FormTextareaInput name="bio" label="Bio" />

Also accepts all TextareaProps.

FormSelect

<FormSelect name="role" label="Role" data={['Admin', 'User', 'Guest']} />

onChange receives (value, option) — the selected option object, not just the raw value — if you pass your own handler alongside the field binding. Also accepts all SelectProps (including data).

FormSwitch

<FormSwitch name="notifications" label="Enable notifications" />

Also accepts all SwitchProps except onChange and label (both are redeclared above with narrower types).

FormRatingInput

<FormRatingInput name="satisfaction" label="How satisfied were you?" />

Also accepts all RatingProps. Unlike the other fields, it’s wrapped in Input.Wrapper directly rather than relying on the underlying primitive’s own label/error rendering, since Rating doesn’t support those itself.

FormSegmentedControl

<FormSegmentedControl name="plan" label="Plan" data={['Monthly', 'Yearly']} />

Also accepts all SegmentedControlProps.

FormRadioGroup

<FormRadioGroup
  name="plan"
  label="Plan"
  data={[
    { value: 'free', label: 'Free' },
    { value: 'pro', label: 'Pro', tooltip: 'Includes priority support' }
  ]}
/>

Also accepts all RadioGroupProps except children.

Each item in data can optionally carry a tooltip. By default the tooltip renders as a HoverCard (so it can hold richer content); set tooltipProps={{ useTooltip: true }} on that item to render it as a simple Tooltip instead:

{
  value: 'enterprise',
  label: 'Enterprise',
  tooltip: 'Contact sales for pricing',
  tooltipProps: { useTooltip: true }
}

Not yet documented

FormProMultiSelect and FormDateTimePicker follow the same name/rules pattern shown throughout this page. Their source wasn’t available to verify prop-for-prop, so they’re left out for now — send them over whenever you’d like these filled in.