RadioGroup

여럿 중 정확히 하나를 고르는 세트입니다. 로빙 탭 인덱스와 방향키는 Base UI가, 그 위에 입혀지는 표면은 이쪽이 담당합니다.

import { Radio, RadioGroup } from 'neba';

<RadioGroup label="플랜" defaultValue="team">
  <Radio value="starter" label="Starter" />
  <Radio value="team" label="Team" />
</RadioGroup>;

Props

RadioGroup

Prop	타입	기본값	설명
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	높이와 타입 스케일
color공통	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	의미론적 색 역할. 그룹이 정하고 모든 Radio가 물려받습니다
orientation공통	'horizontal' | 'vertical'	'vertical'	옵션이 쌓이는 방향. 세로가 기본입니다 — 가로는 라벨이 길어지는 순간 읽을 수 없어집니다
label	ReactNode	—	컨트롤과 연결되는 라벨. Base UI Field가 묶어 줍니다
description	ReactNode	—	보조 설명
error	ReactNode	—	오류 메시지. 값이 있으면 invalid 상태도 함께 켜지고 색 계열이 danger로 넘어갑니다
invalid	boolean	!!error	메시지 없이 invalid만 켭니다. 외부 폼 라이브러리가 유효성을 가질 때
value	Value	—	선택된 값. onValueChange와 함께 제어 컴포넌트로 씁니다
defaultValue	Value	—	초기 선택 값
onValueChange	(value: Value, details) => void	—	선택이 바뀔 때
name	string	—	폼 제출 시의 필드 이름
required	boolean	false	폼 제출 전에 하나를 골라야 함
readOnly	boolean	false	값은 보이지만 바꿀 수 없음. 색과 가장자리는 유지한 채 채도만 빠집니다
disabled	boolean	false	사용 불가. 색 계열을 버리고 중립 회색이 됩니다
children	ReactNode	—	Radio들

Radio

Prop	타입	기본값	설명
value *	Value	—	이 옵션을 식별하는 값. 그룹의 value와 같은 언어로 말합니다
label	ReactNode	—	점 옆의 라벨
description	ReactNode	—	라벨 아래 보조 설명
readOnly	boolean	false	값은 보이지만 바꿀 수 없음. 색과 가장자리는 유지한 채 채도만 빠집니다
disabled	boolean	false	사용 불가. 색 계열을 버리고 중립 회색이 됩니다

Radio에는 자기만의 size도 color도 없습니다. 둘 다 그룹에서 옵니다. 한 번만 지정해도 세트의 모든 옵션에서 같은 뜻이 되는 자리는 그룹뿐이기 때문입니다 — 라디오 버튼은 혼자서는 아무 의미가 없고, 오직 형제들과의 관계에서만 무언가를 말합니다.

예시

설명

문장이 필요한 옵션에는 문장을 답니다. 아래에 설명이 얼마나 붙든 점은 라벨 첫 줄에 맞춰 그대로 있습니다.

import { Radio, RadioGroup } from 'neba';

export default function RadioGroupDescriptions() {
  return (
    <RadioGroup
      label="Deploy target"
      description="You can change this later."
      defaultValue="preview"
    >
      <Radio value="preview" label="Preview" description="A throwaway URL per pull request." />
      <Radio value="staging" label="Staging" description="Shared, and reset every night." />
      <Radio value="production" label="Production" description="Live. Requires an approval." />
    </RadioGroup>
  );
}

방향

기본은 세로입니다. 가로로 늘어놓은 옵션은 라벨 하나가 예상보다 길어지는 순간까지만 괜찮고, 그 뒤로는 조용히 읽을 수 없게 됩니다.

import { Radio, RadioGroup } from 'neba';

export default function RadioGroupOrientation() {
  return (
    <RadioGroup label="Billing period" orientation="horizontal" defaultValue="yearly">
      <Radio value="monthly" label="Monthly" />
      <Radio value="yearly" label="Yearly" />
      <Radio value="once" label="One-off" />
    </RadioGroup>
  );
}

상태

disabled와 readOnly는 그룹에도, 옵션 하나에도 걸 수 있습니다. 그룹에 걸린 readOnly는 모든 구성원에게 전달됩니다.

import { Radio, RadioGroup } from 'neba';

export default function RadioGroupStates() {
  return (
    <div className="flex flex-wrap gap-10">
      <RadioGroup label="One option is out of reach" defaultValue="starter">
        <Radio value="starter" label="Starter" />
        <Radio value="team" label="Team" />
        <Radio value="enterprise" label="Enterprise" disabled />
      </RadioGroup>

      <RadioGroup label="The whole set is read-only" readOnly defaultValue="team">
        <Radio value="starter" label="Starter" />
        <Radio value="team" label="Team" />
      </RadioGroup>

      <RadioGroup label="Plan" error="Choose a plan to continue.">
        <Radio value="starter" label="Starter" />
        <Radio value="team" label="Team" />
      </RadioGroup>
    </div>
  );
}

여기만 둥근 이유

둥글다는 것은 "이 중 아무거나"가 아니라 "이 중 하나"라고 읽는 이에게 말해 주는 신호이고, 이것은 깨뜨렸을 때 얻는 것보다 잃는 것이 많을 만큼 오래된 관습입니다. 그 외에 점을 이루는 모든 것 — 아크릴, 하이라인, 선택 시의 채움 — 은 Checkbox와 같습니다.

접근성

• 세트 전체가 탭 정지 한 번을 차지하고, 그 안에서는 방향키가 움직입니다. 이것이 이 컴포넌트가 input을 나열한 <div>가 아니라 컴포넌트인 이유 전부입니다.
• 그룹의 label이 접근성 이름이 됩니다.
• 각 Radio는 Base UI Field가 라벨과 묶어 주므로 글자를 눌러도 선택됩니다.