Fieldset
Group form fields with legend
Import: import { Fieldset } from 'react-native-mantine';
Usage
import { Fieldset, TextInput } from 'react-native-mantine';
<Fieldset legend="Personal information" variant="default" radius="md">
<TextInput label="Your name" placeholder="Your name" />
<TextInput label="Email" placeholder="your@email.com" />
</Fieldset>
// Disabled fieldset
<Fieldset legend="Shipping address" disabled>
<TextInput label="Street" placeholder="Street" />
<TextInput label="City" placeholder="City" />
</Fieldset>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | Fieldset content, typically form fields | |
legend | React.ReactNode | Fieldset legend, displayed on top of the border | |
variant | 'default' | 'filled' | 'unstyled' | "default" | Visual variant - default (bordered), filled (subtle background), or unstyled (no border or padding) |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | "sm" | Key of theme.radius or any valid value to set border-radius |
disabled | boolean | false | Disables all inputs and buttons inside the fieldset |
legendStyle | TextStyle | Additional styles to apply to the legend text | |
style | ViewStyle | Additional styles to apply to the fieldset container |