Components
Form
Form is layout only — it groups FormSections and draws the separators.
The inputs inside stay ordinary components.
<Form className="w-96">
<FormSection ios={{ title: 'Section one' }}>
<FormItem>
<TextField label="Field one" defaultValue="Value one" />
</FormItem>
<FormItem isLast>
<TextField label="Field two" defaultValue="Value two" />
</FormItem>
</FormSection>
</Form>Import
import { Form } from '@simal/ui/nativewindui';Props
| Prop | Values | Default | Description |
|---|---|---|---|
children | — | — | FormSections. Form only stacks them and draws separators — it does not manage values, validation or submission. |
Examples
With Footnote
footnote renders the explanatory line under a section.
<Form className="w-96">
<FormSection
ios={{ title: 'Section two' }}
footnote="Explanatory footnote text rendered under the section."
>
<FormItem isLast>
<Toggle value />
</FormItem>
</FormSection>
</Form>Multiple Sections
<Form className="w-96 gap-6">
<FormSection ios={{ title: 'Section one' }}>
<FormItem>
<TextField label="Field one" defaultValue="Value one" />
</FormItem>
<FormItem isLast>
<TextField label="Field two" defaultValue="Value two" />
</FormItem>
</FormSection>
<FormSection
ios={{ title: 'Section two' }}
footnote="Explanatory footnote text rendered under the section."
>
<FormItem>
<Text>Value one</Text>
</FormItem>
<FormItem isLast>
<Text>Value two</Text>
</FormItem>
</FormSection>
</Form>