7.0.0-beta.7
Search
Ctrl + K
theming
styles
guides
mantine hooks
mantine form
mantine core
layout
inputs
combobox
buttons
navigation
feedback
overlays
Data display
typography
misc
mantine dates
other packages
changelog
Group related elements in a form
Import
import { Fieldset } from '@mantine/core';
Source
Docs
Package
import { Fieldset } from '@mantine/core'; function Demo() { return ( <Fieldset legend="Personal information"> <TextInput label="Your name" placeholder="Your name" /> <TextInput label="Email" placeholder="Email" mt="md" /> </Fieldset> ); }
Set disabled prop to disable all inputs and buttons inside the fieldset:
disabled
import { Fieldset, TextInput, Button, Group } from '@mantine/core'; function Demo() { return ( <Fieldset legend="Personal information" disabled> <TextInput label="Your name" placeholder="Your name" /> <TextInput label="Email" placeholder="Email" mt="md" /> <Group justify="flex-end" mt="md"> <Button>Submit</Button> </Group> </Fieldset> ); }
Previous
ColorPicker
Next
FileInput
Build fully functional accessible web applications faster than ever
About
Community
Project
Built by Vitaly Rtishchev and these awesome people