#<Form>

#Basic Usage

Use <Form> to manage form state, handle form validation, and submission

#Avoiding Keyboard Overlap

Prevent the on-screen keyboard from obscuring the input field by automatically adjusting the view when the keyboard appears

#Structure

<FormRoot initialValues={}>
  <FormField as="RadioGroupRoot" name="select">
    {data.map(() => (
      <Radio>
        <RadioIndicator />
      </Radio>
    ))}
  </FormField>

  <FormField as="Input" name="input1" />
  <FormField as="Input" name="input2" />

  <FormSubmitButton onSubmit={handleSubmit}></FormSubmitButton>
</FormRoot>

#API

#FormRoot

#FormField

#FormSubmitButton

State-based styling & rendering

This component exposes each of its internal states through two interchangeable channels, and the table below maps them one-to-one:

• CSS className — a class like ui-<state> is toggled on the root node, so you can style it with selectors such as .ui-<state> { ... }.
• Render-prop field — when children is a function, the same state is passed in via children({ <state>: boolean, ... }) for runtime-driven rendering.