Radio

Radio (라디오)

Radio는 여러 개의 옵션 중에서 하나를 선택할 때 사용하는 컴포넌트예요. 라디오 그룹(RadioGroup) 형태로 함께 사용해요.

출처: 문서

본문

사용법 (Usage)

import { RadioGroup } from "@chakra-ui/react"

<RadioGroup.Root>
  <RadioGroup.Item>
    <RadioGroup.ItemHiddenInput />
    <RadioGroup.ItemIndicator />
    <RadioGroup.ItemText />
  </RadioGroup.Item>
</RadioGroup.Root>

:::info

클로즈드 컴포넌트 구성(closed component composition)을 선호한다면, 아래의 스니펫을 확인하세요.

:::

예시 (Examples)

Controlled

RadioGroup.Root 컴포넌트에 value와 onValueChange props를 전달해 선택된 라디오 버튼을 제어할 수 있어요.

색상 (Colors)

RadioGroup.Root 컴포넌트에 colorPalette prop을 전달해 컴포넌트의 색상 스킴을 바꿀 수 있어요.

크기 (Sizes)

RadioGroup.Root 컴포넌트에 size prop을 전달해 라디오 컴포넌트의 크기를 바꿀 수 있어요.

변형 (Variants)

RadioGroup.Root 컴포넌트에 variant prop을 전달해 라디오 컴포넌트의 외형을 바꿀 수 있어요.

비활성화 (Disabled)

RadioGroup.Item 컴포넌트에 disabled prop을 전달해 라디오를 비활성화할 수 있어요.

Hook Form

react-hook-form의 Controller 컴포넌트를 사용해 폼 안에서 라디오 그룹을 제어할 수 있어요.

클로즈드 컴포넌트 (Closed Component)

클로즈드 컴포넌트 구성을 위해 Radio를 설정하는 방법을 보여줘요.

프로젝트에 클로즈드 컴포넌트를 자동으로 추가하려면 다음 명령을 실행하세요:

npx @chakra-ui/cli snippet add radio

사용 방법은 다음과 같아요:

<RadioGroup>
  <Radio />
</RadioGroup>

Props

RadioGroup의 Root 파트에서 사용 가능한 props는 공식 문서에서 확인할 수 있어요.

더 알아보기 (Learn more)