use-form with all inputs

use-form with all inputs

모든 Mantine 입력 컴포넌트와 함께 use-form을 사용하는 방법을 보여주는 문서예요.

출처: 문서

본문

이 페이지는 모든 Mantine 입력과 함께 use-form을 사용하는 방법을 보여줘요. 각각은 비제어 모드(mode: 'uncontrolled')에서 form.getInputProps()를 통해 폼에 연결되고, form.onSubmit()으로 제출돼요.

function Demo() {
  const form = useForm({
    mode: 'uncontrolled',
    initialValues: {
      field: defaultValue,
    },
  });

  return (
    <form onSubmit={form.onSubmit((values) => console.log(values))}>
      <ComponentLabel {...form.getInputProps('field')} />
      <Group mt="md">
        <Button type="submit">Submit</Button>
      </Group>
    </form>
  );
}

AngleSlider

import { AngleSlider, Button, Group } from '@mantine/core';
import { useForm } from '@mantine/form';

function Demo() {
  const form = useForm({
    mode: 'uncontrolled',
    initialValues: { angle: 0 },
  });

  return (
    <form onSubmit={form.onSubmit((values) => console.log(values))}>
      <AngleSlider {...form.getInputProps('angle')} />
      <Group mt="md"><Button type="submit">Submit</Button></Group>
    </form>
  );
}

Autocomplete

import { Autocomplete, Button, Group } from '@mantine/core';
import { useForm } from '@mantine/form';

function Demo() {
  const form = useForm({
    mode: 'uncontrolled',
    initialValues: { framework: '' },
  });

  return (
    <form onSubmit={form.onSubmit((values) => console.log(values))}>
      <Autocomplete label="Pick framework" data={['React', 'Angular', 'Svelte']} {...form.getInputProps('framework')} />
      <Group mt="md"><Button type="submit">Submit</Button></Group>
    </form>
  );
}

Checkbox

import { Checkbox, Button, Group } from '@mantine/core';
import { useForm } from '@mantine/form';

function Demo() {
  const form = useForm({
    mode: 'uncontrolled',
    initialValues: { termsParams: false },
    validate: {
      termsParams: (value) => (value ? null : 'You must agree to sell your soul'),
    },
  });

  return (
    <form onSubmit={form.onSubmit((values) => console.log(values))}>
      <Checkbox label="I agree to sell my privacy" {...form.getInputProps('termsParams', { type: 'checkbox' })} />
      <Group mt="md"><Button type="submit">Submit</Button></Group>
    </form>
  );
}

Checkbox.Group

import { Checkbox, Group, Button } from '@mantine/core';
import { useForm } from '@mantine/form';

function Demo() {
  const form = useForm({
    mode: 'uncontrolled',
    initialValues: { favFrameworks: [] },
  });

  return (
    <form onSubmit={form.onSubmit((values) => console.log(values))}>
      <Checkbox.Group label="Select your favorite frameworks/libraries" {...form.getInputProps('favFrameworks')}>
        <Checkbox value="react" label="React" />
        <Checkbox value="mantine" label="Mantine" />
        <Checkbox value="angular" label="Angular" />
        <Checkbox value="svelte" label="Svelte" />
      </Checkbox.Group>
      <Group mt="md"><Button type="submit">Submit</Button></Group>
    </form>
  );
}

Chip

import { Chip, Button, Group } from '@mantine/core';
import { useForm } from '@mantine/form';

function Demo() {
  const form = useForm({
    mode: 'uncontrolled',
    initialValues: { awesome: false },
  });

  return (
    <form onSubmit={form.onSubmit((values) => console.log(values))}>
      <Chip {...form.getInputProps('awesome', { type: 'checkbox' })}>Mantine is awesome</Chip>
      <Group mt="md"><Button type="submit">Submit</Button></Group>
    </form>
  );
}

ColorInput

import { ColorInput, Button, Group } from '@mantine/core';
import { useForm } from '@mantine/form';

function Demo() {
  const form = useForm({
    mode: 'uncontrolled',
    initialValues: { color: '' },
  });

  return (
    <form onSubmit={form.onSubmit((values) => console.log(values))}>
      <ColorInput label="Your favorite color" {...form.getInputProps('color')} />
      <Group mt="md"><Button type="submit">Submit</Button></Group>
    </form>
  );
}

ColorPicker

import { ColorPicker, Text, Button, Group } from '@mantine/core';
import { useForm } from '@mantine/form';

function Demo() {
  const form = useForm({
    mode: 'uncontrolled',
    initialValues: { color: '#000000' },
  });

  return (
    <form onSubmit={form.onSubmit((values) => console.log(values))}>
      <Text>Pick color</Text>
      <ColorPicker {...form.getInputProps('color')} />
      <Group mt="md"><Button type="submit">Submit</Button></Group>
    </form>
  );
}

Fieldset

import { Fieldset, TextInput, Button, Group } from '@mantine/core';
import { useForm } from '@mantine/form';

function Demo() {
  const form = useForm({
    mode: 'uncontrolled',
    initialValues: { name: '', email: '' },
  });

  return (
    <form onSubmit={form.onSubmit((values) => console.log(values))}>
      <Fieldset legend="Personal information">
        <TextInput label="Name" {...form.getInputProps('name')} />
        <TextInput label="Email" {...form.getInputProps('email')} />
      </Fieldset>
      <Group mt="md"><Button type="submit">Submit</Button></Group>
    </form>
  );
}

FileInput

import { FileInput, Button, Group } from '@mantine/core';
import { useForm } from '@mantine/form';

function Demo() {
  const form = useForm({
    mode: 'uncontrolled',
    initialValues: { avatar: null },
  });

  return (
    <form onSubmit={form.onSubmit((values) => console.log(values))}>
      <FileInput label="Avatar" placeholder="Upload avatar" {...form.getInputProps('avatar')} />
      <Group mt="md"><Button type="submit">Submit</Button></Group>
    </form>
  );
}

Input

import { Input, Button, Group } from '@mantine/core';
import { useForm } from '@mantine/form';

function Demo() {
  const form = useForm({
    mode: 'uncontrolled',
    initialValues: { phone: '' },
  });

  return (
    <form onSubmit={form.onSubmit((values) => console.log(values))}>
      <Input.Wrapper label="Phone" withAsterisk>
        <Input {...form.getInputProps('phone')} />
      </Input.Wrapper>
      <Group mt="md"><Button type="submit">Submit</Button></Group>
    </form>
  );
}

JsonInput

import { JsonInput, Button, Group } from '@mantine/core';
import { useForm } from '@mantine/form';

function Demo() {
  const form = useForm({
    mode: 'uncontrolled',
    initialValues: { packageJson: '{"name": "mantine"}' },
  });

  return (
    <form onSubmit={form.onSubmit((values) => console.log(values))}>
      <JsonInput label="package.json" {...form.getInputProps('packageJson')} />
      <Group mt="md"><Button type="submit">Submit</Button></Group>
    </form>
  );
}

MaskInput

import { MaskInput, Button, Group } from '@mantine/core';
import { useForm } from '@mantine/form';

function Demo() {
  const form = useForm({
    mode: 'uncontrolled',
    initialValues: { phone: '' },
  });

  return (
    <form onSubmit={form.onSubmit((values) => console.log(values))}>
      <MaskInput
        label="Phone"
        mask="(###) ###-####"
        {...form.getInputProps('phone')}
        onChange={(raw) => form.setFieldValue('phone', raw, { forceUpdate: false })}
      />
      <Group mt="md"><Button type="submit">Submit</Button></Group>
    </form>
  );
}

MultiSelect

import { MultiSelect, Button, Group } from '@mantine/core';
import { useForm } from '@mantine/form';

function Demo() {
  const form = useForm({
    mode: 'uncontrolled',
    initialValues: { frameworks: [] },
  });

  return (
    <form onSubmit={form.onSubmit((values) => console.log(values))}>
      <MultiSelect label="Pick frameworks" data={['React', 'Angular', 'Svelte']} {...form.getInputProps('frameworks')} />
      <Group mt="md"><Button type="submit">Submit</Button></Group>
    </form>
  );
}

NativeSelect

import { NativeSelect, Button, Group } from '@mantine/core';
import { useForm } from '@mantine/form';

function Demo() {
  const form = useForm({
    mode: 'uncontrolled',
    initialValues: { framework: 'react' },
  });

  return (
    <form onSubmit={form.onSubmit((values) => console.log(values))}>
      <NativeSelect label="Select framework" data={['React', 'Angular', 'Svelte', 'Vue']} {...form.getInputProps('framework')} />
      <Group mt="md"><Button type="submit">Submit</Button></Group>
    </form>
  );
}

NumberInput

import { NumberInput, Button, Group } from '@mantine/core';
import { useForm } from '@mantine/form';

function Demo() {
  const form = useForm({
    mode: 'uncontrolled',
    initialValues: { age: 18 },
  });

  return (
    <form onSubmit={form.onSubmit((values) => console.log(values))}>
      <NumberInput label="Your age" {...form.getInputProps('age')} />
      <Group mt="md"><Button type="submit">Submit</Button></Group>
    </form>
  );
}

PasswordInput

import { PasswordInput, Button, Group } from '@mantine/core';
import { useForm } from '@mantine/form';

function Demo() {
  const form = useForm({
    mode: 'uncontrolled',
    initialValues: { password: '' },
  });

  return (
    <form onSubmit={form.onSubmit((values) => console.log(values))}>
      <PasswordInput label="Password" {...form.getInputProps('password')} />
      <Group mt="md"><Button type="submit">Submit</Button></Group>
    </form>
  );
}

PinInput

import { PinInput, Button, Group, Text } from '@mantine/core';
import { useForm } from '@mantine/form';

function Demo() {
  const form = useForm({
    mode: 'uncontrolled',
    initialValues: { pin: '' },
  });

  return (
    <form onSubmit={form.onSubmit((values) => console.log(values))}>
      <Text>Enter PIN</Text>
      <PinInput {...form.getInputProps('pin')} />
      <Group mt="md"><Button type="submit">Submit</Button></Group>
    </form>
  );
}

Radio.Group

import { Radio, Button, Group } from '@mantine/core';
import { useForm } from '@mantine/form';

function Demo() {
  const form = useForm({
    mode: 'uncontrolled',
    initialValues: { framework: 'react' },
  });

  return (
    <form onSubmit={form.onSubmit((values) => console.log(values))}>
      <Radio.Group label="Select your favorite framework/library" {...form.getInputProps('framework')}>
        <Radio value="react" label="React" />
        <Radio value="mantine" label="Mantine" />
        <Radio value="angular" label="Angular" />
        <Radio value="svelte" label="Svelte" />
      </Radio.Group>
      <Group mt="md"><Button type="submit">Submit</Button></Group>
    </form>
  );
}

RangeSlider

import { RangeSlider, Button, Group, Text } from '@mantine/core';
import { useForm } from '@mantine/form';

function Demo() {
  const form = useForm({
    mode: 'uncontrolled',
    initialValues: { range: [20, 80] as [number, number] },
  });

  return (
    <form onSubmit={form.onSubmit((values) => console.log(values))}>
      <Text>Price range</Text>
      <RangeSlider {...form.getInputProps('range')} />
      <Group mt="md"><Button type="submit">Submit</Button></Group>
    </form>
  );
}

Rating

import { Rating, Button, Group, Text } from '@mantine/core';
import { useForm } from '@mantine/form';

function Demo() {
  const form = useForm({
    mode: 'uncontrolled',
    initialValues: { rating: 0 },
  });

  return (
    <form onSubmit={form.onSubmit((values) => console.log(values))}>
      <Text>Rating</Text>
      <Rating {...form.getInputProps('rating')} />
      <Group mt="md"><Button type="submit">Submit</Button></Group>
    </form>
  );
}

SegmentedControl

import { SegmentedControl, Button, Group, Text } from '@mantine/core';
import { useForm } from '@mantine/form';

function Demo() {
  const form = useForm({
    mode: 'uncontrolled',
    initialValues: { framework: 'react' },
  });

  return (
    <form onSubmit={form.onSubmit((values) => console.log(values))}>
      <Text>Select framework</Text>
      <SegmentedControl data={['React', 'Angular', 'Svelte', 'Vue']} {...form.getInputProps('framework')} />
      <Group mt="md"><Button type="submit">Submit</Button></Group>
    </form>
  );
}

Select

import { Select, Button, Group } from '@mantine/core';
import { useForm } from '@mantine/form';

function Demo() {
  const form = useForm({
    mode: 'uncontrolled',
    initialValues: { framework: '' },
  });

  return (
    <form onSubmit={form.onSubmit((values) => console.log(values))}>
      <Select label="Pick framework" data={['React', 'Angular', 'Svelte']} {...form.getInputProps('framework')} />
      <Group mt="md"><Button type="submit">Submit</Button></Group>
    </form>
  );
}

Slider

import { Slider, Button, Group, Text } from '@mantine/core';
import { useForm } from '@mantine/form';

function Demo() {
  const form = useForm({
    mode: 'uncontrolled',
    initialValues: { value: 40 },
  });

  return (
    <form onSubmit={form.onSubmit((values) => console.log(values))}>
      <Text>Volume</Text>
      <Slider {...form.getInputProps('value')} />
      <Group mt="md"><Button type="submit">Submit</Button></Group>
    </form>
  );
}

Switch

import { Switch, Button, Group } from '@mantine/core';
import { useForm } from '@mantine/form';

function Demo() {
  const form = useForm({
    mode: 'uncontrolled',
    initialValues: { notifications: false },
  });

  return (
    <form onSubmit={form.onSubmit((values) => console.log(values))}>
      <Switch label="Enable notifications" {...form.getInputProps('notifications', { type: 'checkbox' })} />
      <Group mt="md"><Button type="submit">Submit</Button></Group>
    </form>
  );
}

Switch.Group

import { Switch, Group, Button } from '@mantine/core';
import { useForm } from '@mantine/form';

function Demo() {
  const form = useForm({
    mode: 'uncontrolled',
    initialValues: { favFrameworks: [] },
  });

  return (
    <form onSubmit={form.onSubmit((values) => console.log(values))}>
      <Switch.Group label="Select your favorite frameworks/libraries" {...form.getInputProps('favFrameworks')}>
        <Switch value="react" label="React" />
        <Switch value="mantine" label="Mantine" />
        <Switch value="angular" label="Angular" />
        <Switch value="svelte" label="Svelte" />
      </Switch.Group>
      <Group mt="md"><Button type="submit">Submit</Button></Group>
    </form>
  );
}

TagsInput

import { TagsInput, Button, Group } from '@mantine/core';
import { useForm } from '@mantine/form';

function Demo() {
  const form = useForm({
    mode: 'uncontrolled',
    initialValues: { frameworks: [] },
  });

  return (
    <form onSubmit={form.onSubmit((values) => console.log(values))}>
      <TagsInput label="Press Enter to submit a tag" data={['React', 'Angular', 'Svelte']} {...form.getInputProps('frameworks')} />
      <Group mt="md"><Button type="submit">Submit</Button></Group>
    </form>
  );
}

Textarea

import { Textarea, Button, Group } from '@mantine/core';
import { useForm } from '@mantine/form';

function Demo() {
  const form = useForm({
    mode: 'uncontrolled',
    initialValues: { message: '' },
  });

  return (
    <form onSubmit={form.onSubmit((values) => console.log(values))}>
      <Textarea label="Your message" {...form.getInputProps('message')} />
      <Group mt="md"><Button type="submit">Submit</Button></Group>
    </form>
  );
}

TextInput

import { TextInput, Button, Group } from '@mantine/core';
import { useForm } from '@mantine/form';

function Demo() {
  const form = useForm({
    mode: 'uncontrolled',
    initialValues: { email: '' },
    validate: {
      email: (value) => (/^\S+@\S+$/.test(value) ? null : 'Invalid email'),
    },
  });

  return (
    <form onSubmit={form.onSubmit((values) => console.log(values))}>
      <TextInput label="Email" placeholder="Your email" withAsterisk {...form.getInputProps('email')} />
      <Group mt="md"><Button type="submit">Submit</Button></Group>
    </form>
  );
}

더 알아보기 (Learn more)

• Recipes
• use-form
• Form validation