Radio

Radio

input[type="radio"] 타입의 래퍼 컴포넌트예요.

출처: 문서

본문

사용법 (Usage)

Radio로 라디오 인풋을 만들어요. label, description, error, size, color, variant, labelPosition 등의 prop을 지원해요.

import { Radio } from '@mantine/core';

function Demo() {
  return <Radio label="I cannot be unchecked" />;
}

제어 방식 (Controlled)

import { useState } from 'react';
import { Radio } from '@mantine/core';

function Demo() {
  const [checked, setChecked] = useState(false);
  return <Radio checked={checked} onChange={(event) => setChecked(event.currentTarget.checked)} label="I cannot be unchecked" />;
}

비제어 방식 (Uncontrolled)

Radio은 네이티브 input[type="radio"]와 같은 방식으로 비제어 폼에서 사용할 수 있어요. 폼 제출 시 FormData 객체에 라디오 값을 포함하려면 name과 value 속성을 설정해요. 비제어 폼에서 초기 체크 상태를 제어하려면 defaultChecked prop을 사용해요.

FormData와 함께 비제어 Radio을 사용하는 예시:

import { Radio } from '@mantine/core';

function Demo() {
  return (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        const formData = new FormData(event.currentTarget);
        console.log('Radio value:', formData.get('option'));
      }}
    >
      <Radio name="option" value="react" label="React" defaultChecked />
      <button type="submit">Submit</button>
    </form>
  );
}

상태 (States)

import { Radio, Stack } from '@mantine/core';

function Demo() {
  return (
    <Stack>
      <Radio label="Default radio" />
      <Radio label="Checked radio" defaultChecked />
      <Radio label="Outline checked radio" checked variant="outline" />
      <Radio label="Disabled radio" disabled />
      <Radio label="Disabled checked radio" checked disabled />
    </Stack>
  );
}

아이콘 변경 (Change icon)

import { Radio, CheckIcon } from '@mantine/core';

function Demo() {
  return <Radio icon={CheckIcon} label="Custom check icon" defaultChecked />;
}

아이콘 색상 변경 (Change icon color)

import { Radio } from '@mantine/core';

function Demo() {
  return <Radio iconColor="red" label="Custom icon color" defaultChecked />;
}

비활성 상태 (Disabled state)

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

function Demo() {
  return (
    <Group>
      <Radio label="React" disabled />
      <Radio label="Angular" disabled />
      <Radio label="Svelte" disabled />
    </Group>
  );
}

포인터 커서 (Pointer cursor)

기본적으로 라디오 인풋과 라벨은 cursor: default예요(네이티브 input[type="radio"]와 동일). 커서를 pointer로 바꾸려면 theme에 cursorType을 설정해요.

import { createTheme, MantineProvider, Radio } from '@mantine/core';

const theme = createTheme({
  cursorType: 'pointer',
});

function Demo() {
  return (
    <MantineProvider theme={theme}>
      <Radio label="I cannot be unchecked" />
    </MantineProvider>
  );
}

툴팁이 있는 Radio (Radio with tooltip)

refProp으로 툴팁이 붙는 타겟 요소를 변경할 수 있어요.

• refProp이 설정되지 않으면 툴팁은 라디오 인풋에 붙어요
• refProp="rootRef"가 설정되면 툴팁은 루트 요소(라벨, 인풋, 다른 요소 포함)에 붙어요

import { Tooltip, Radio } from '@mantine/core';

function Demo() {
  return (
    <>
      <Tooltip label="Tooltip on radio only">
        <Radio refProp="rootRef" label="Tooltip on radio only" />
      </Tooltip>
      <Radio label="Tooltip the entire element" />
    </>
  );
}

루트 요소에 prop 추가 (Add props to the root element)

컴포넌트에 전달되는 모든 prop은 인풋 요소로 전달돼요. 루트 요소에 prop을 추가해야 한다면 wrapperProps를 사용해요. 아래 예시에서:

• data-testid="wrapper"는 루트 요소에 추가돼요
• data-testid="input"는 인풋 요소에 추가돼요

import { Radio } from '@mantine/core';

function Demo() {
  return <Radio label="Hello" wrapperProps={{ 'data-testid': 'wrapper' }} data-testid="input" />;
}

Radio.Group 컴포넌트

Radio.Group으로 라디오 그룹을 만들 수 있어요. label, description, error, withAsterisk 등을 지원해요.

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

function Demo() {
  return (
    <Radio.Group label="Select your favorite framework/library *" description="This is anonymous" withAsterisk>
      <Group>
        <Radio value="react" label="React" />
        <Radio value="svelte" label="Svelte" />
        <Radio value="angular" label="Angular" />
        <Radio value="vue" label="Vue" />
      </Group>
    </Radio.Group>
  );
}

Radio.Group 비활성 상태

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

function Demo() {
  return (
    <Radio.Group label="Select your favorite framework/library" description="This is anonymous" disabled>
      <Group>
        <Radio value="react" label="React" defaultChecked />
        <Radio value="angular" label="Angular" />
        <Radio value="svelte" label="Svelte" />
      </Group>
    </Radio.Group>
  );
}

제어되는 Radio.Group (Controlled Radio.Group)

import { useState } from 'react';
import { Radio } from '@mantine/core';

function Demo() {
  const [value, setValue] = useState('react');

  return <Radio.Group value={value} onChange={setValue} label="Select your framework">{/* ... */}</Radio.Group>;
}

Radio.Indicator

Radio.Indicator는 Radio 컴포넌트와 똑같이 보이지만 의미적 요소는 없어요. 라디오 상태의 시각적 표현일 뿐이에요. 인디케이터와 관련된 상호작용 없이 라디오 상태를 표시해야 하는 곳에 사용할 수 있어요. 예를 들어 버튼 기반 카드, 트리 등에서 유용해요.

Radio.Indicator는 키보드로 포커스하거나 선택할 수 없어요. 접근 불가능하며 Radio 컴포넌트의 대체품으로 사용해서는 안 돼요.

Radio.Card 컴포넌트

Radio.Card 컴포넌트는 라디오처럼 동작하는 커스텀 카드/버튼/기타 요소를 만들기 위한 Radio 대체품으로 사용할 수 있어요. 컴포넌트의 루트 요소에는 role="radio" 속성이 있고, 기본적으로 접근 가능하며 input[type="radio"]와 동일한 키보드 상호작용을 지원해요.

import { useState } from 'react';
import { Radio, Group, Text } from '@mantine/core';
import classes from './Demo.module.css';

function Demo() {
  const [checked, setChecked] = useState(false);

  return (
    <Radio.Card className={classes.root} checked={checked} onClick={() => setChecked((c) => !c)}>
      <Group wrap="nowrap" align="flex-start">
        <Radio.Indicator />
        <div>
          <Text fw={500}>@mantine/core</Text>
          <Text size="sm" c="dimmed">Core components library: inputs, buttons, overlays, etc.</Text>
        </div>
      </Group>
    </Radio.Card>
  );
}

Radio.Card는 Radio 컴포넌트와 같은 방식으로 Radio.Group과 함께 사용할 수 있어요.

요소 ref 가져오기 (Get element ref)

import { useRef } from 'react';
import { Radio } from '@mantine/core';

function Demo() {
  const ref = useRef<HTMLInputElement>(null);
  return <Radio ref={ref} label="Hello" />;
}

Styles API

Radio은 Styles API를 지원해요. classNames prop으로 컴포넌트의 내부 요소에 스타일을 추가할 수 있어요.

Styles API 셀렉터:

• root – 루트 요소
• radio – 인풋 요소 (input[type="radio"])
• icon – 체크 상태 아이콘을 표시하는 데 사용되는 라디오 아이콘
• inner – icon과 input의 래퍼
• body – 인풋 본문, 다른 모든 요소를 포함
• labelWrapper – label, description, error를 포함
• label – 라벨 요소
• description – 라벨 아래에 표시되는 설명
• error – 라벨 아래에 표시되는 오류 메시지

접근성 (Accessibility)

aria-label 또는 label prop을 설정해 라디오를 접근 가능하게 만들어요.

import { Radio } from '@mantine/core';

// Not ok, input is not labeled
function Bad() {
  return <Radio />;
}

// Ok, input is labeled by aria-label
function GoodAriaLabel() {
  return <Radio aria-label="React" />;
}

// Ok, input is labeled by label element
function GoodLabel() {
  return <Radio label="React" />;
}

더 알아보기 (Learn more)

• PinInput
• RangeSlider