Component

RadioGroup

서로 배타적인 선택지 중 하나를 고릅니다.

Playground

옵션을 조절하며 화면과 사용 코드를 함께 확인하세요.

PC 1280px

Controls

fieldset legend에 표시할 그룹 이름

선택지의 배치 방향

같은 size의 입력 필드에 맞춘 표시·레이블 크기

그룹 전체 비활성

native form 필수

Code

import { RadioGroup, RadioGroupItem } from '@amineslab/ui'

export default function ExamplePreview() {
  return ((<RadioGroup defaultValue="standard" disabled={false} label={"알림 빈도"} orientation={"vertical"} required={false} size={"md"}>
      <RadioGroupItem label="기본" value="standard"/>
      <RadioGroupItem label="중요한 알림만" value="important"/>
      <RadioGroupItem label="받지 않음" value="none"/>
    </RadioGroup>))
}

Props

import { RadioGroup, RadioGroupRoot, RadioGroupItem } from '@amineslab/ui'

`RadioGroup`

Name	Type	Default	Description
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	모든 항목의 기본 크기입니다. Item의 size로 개별 재정의할 수 있습니다.
`value`	`string`	-	외부에서 제어하는 선택값입니다.
`defaultValue`	`string`	-	내부 상태로 관리할 때의 초기 선택값입니다.
`name`	`string`	-	HTML 폼 제출에 사용할 이름입니다.
`label`	`ReactNode`	-	그룹 이름을 표시합니다.
`orientation`	`'horizontal' \| 'vertical'`	`'vertical'`	선택지의 배치 방향입니다.
`onValueChange`	`(value: string) => void`	-	선택값이 바뀔 때 호출합니다.
`required`	`boolean`	`false`	HTML 폼에서 선택을 필수로 만듭니다.

`RadioGroupItem`

Name	Type	Default	Description
`value*`	`string`	-	선택지 값입니다.
`label`	`ReactNode`	-	radio 옆에 표시할 레이블입니다.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	같은 size의 입력 필드와 비례하는 표시·레이블 크기입니다. 모바일 표시는 4px 확대됩니다.
`disabled`	`boolean`	`false`	선택할 수 없게 합니다.

Examples

자주 쓰는 조합을 살펴보고, 필요한 예시의 코드를 펼쳐 확인하세요.

Horizontal

테마

LightDark

import { RadioGroup, RadioGroupItem } from '@amineslab/ui'

export default function ExamplePreview() {
  return ((<RadioGroup defaultValue="light" label="테마" orientation="horizontal">
          <RadioGroupItem label="Light" value="light"/>
          <RadioGroupItem label="Dark" value="dark"/>
        </RadioGroup>))
}

Disabled item

요금제

FreeTeamEnterprise (문의)

import { RadioGroup, RadioGroupItem } from '@amineslab/ui'

export default function ExamplePreview() {
  return ((<RadioGroup defaultValue="free" label="요금제">
          <RadioGroupItem label="Free" value="free"/>
          <RadioGroupItem label="Team" value="team"/>
          <RadioGroupItem disabled label="Enterprise (문의)" value="enterprise"/>
        </RadioGroup>))
}

RadioGroupField로 사용하기

RadioGroupField는 기본 입력에 label·required·description·error를 함께 제공합니다. FormStack 안에 직접 넣으며 FormField로 다시 감싸지 않습니다.

알림 빈도

매일매주

라벨·설명·필수 표시를 Field가 함께 처리합니다.

import { useState } from 'react'

import { RadioGroupField } from '@amineslab/ui'

const fieldDescription = '라벨·설명·필수 표시를 Field가 함께 처리합니다.';

function RadioGroupFieldExample() {
    const [value, setValue] = useState('');
    return (<RadioGroupField label="알림 빈도" description={fieldDescription} required value={value} onValueChange={setValue} options={[
            { value: 'daily', label: '매일' },
            { value: 'weekly', label: '매주' },
        ]}/>);
}

export default function ExamplePreview() {
  return (<RadioGroupFieldExample />)
}

사용 기준

권장하는 사용

선택지를 비교해야 할 때 모두 보이게 배치합니다.

피해야 할 사용

겉모양만으로 사용을 결정하지 마세요.
의미와 키보드 동작, 모바일에서의 흐름을 함께 확인하세요.

접근성

화면에 맞는 이름을 제공하고, 키보드만으로 작업을 마칠 수 있는지 확인하세요.

Arrow keys: 다음 또는 이전 항목
Space: 현재 항목 선택