Mantine Form

Mantine Form (@mantine/form)

@mantine/form 패키지는 폼 상태, 검증, 제출을 관리하는 useForm 훅을 제공해요. useForm 훅은 다른 Mantine 라이브러리(@mantine/core, @mantine/dates 등)와 함께 사용하도록 설계되어서, 모든 Mantine 입력 컴포넌트가 별도 설정 없이 useForm과 호환돼요.

출처: 문서

본문

설치

yarn add @mantine/form

사용법

@mantine/form 패키지는 어떤 웹 React 애플리케이션에서든 사용할 수 있어요. 이 패키지는 Mantine 컴포넌트와 함께 동작하도록 설계되었지만, 네이티브 입력이나 다른 폼 라이브러리와 함께 써도 돼요. @mantine/form은 독립 실행(standalone)이 가능하고 React 외의 의존성은 없어요.

useForm 훅으로 간단한 폼을 만드는 예시예요:

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

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

    validate: {
      email: (value) => (/^\S+@\S+$/.test(value) ? null : 'Invalid email'),
    },
  });

  return (
    <form onSubmit={form.onSubmit((values) => console.log(values))}>
      <TextInput
        withAsterisk
        label="Email"
        placeholder="[email protected]"
        key={form.key('email')}
        {...form.getInputProps('email')}
      />

      <Checkbox
        mt="md"
        label="I agree to sell my privacy"
        key={form.key('termsOfService')}
        {...form.getInputProps('termsOfService', { type: 'checkbox' })}
      />

      <Group justify="flex-end" mt="md">
        <Button type="submit">Submit</Button>
      </Group>
    </form>
  );
}

라이선스

MIT

더 알아보기 (Learn more)