import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx'; import { FormDemos } from '@docs/demos';

export default Layout(MDX_DATA.formAllInputs);

use-form with all inputs

This page demonstrates usage of use-form with all Mantine inputs.

AngleSlider

<Demo data={FormDemos.angleSlider} />

Autocomplete

<Demo data={FormDemos.autocomplete} />

Checkbox

<Demo data={FormDemos.checkbox} />

Checkbox.Group

<Demo data={FormDemos.checkboxGroup} />

Chip

<Demo data={FormDemos.chip} />

ColorInput

<Demo data={FormDemos.colorInput} />

ColorPicker

<Demo data={FormDemos.colorPicker} />

Fieldset

<Demo data={FormDemos.fieldset} />

FileInput

<Demo data={FormDemos.fileInput} />

Input

<Demo data={FormDemos.input} />

JsonInput

<Demo data={FormDemos.jsonInput} />

MaskInput

<Demo data={FormDemos.maskInput} />

MultiSelect

<Demo data={FormDemos.multiSelect} />

NativeSelect

<Demo data={FormDemos.nativeSelect} />

NumberInput

<Demo data={FormDemos.numberInput} />

PasswordInput

<Demo data={FormDemos.passwordInput} />

PinInput

<Demo data={FormDemos.pinInput} />

Radio.Group

<Demo data={FormDemos.radioGroup} />

RangeSlider

<Demo data={FormDemos.rangeSlider} />

Rating

<Demo data={FormDemos.rating} />

SegmentedControl

<Demo data={FormDemos.segmentedControl} />

Select

<Demo data={FormDemos.select} />

Slider

<Demo data={FormDemos.slider} />

Switch

<Demo data={FormDemos.switchDemo} />

Switch.Group

<Demo data={FormDemos.switchGroup} />

TagsInput

<Demo data={FormDemos.tagsInput} />

Textarea

<Demo data={FormDemos.textarea} />

TextInput

<Demo data={FormDemos.textInput} />