Radio

하나만 고르는 선택 컨트롤이다.

import { Radio, RadioGroup } from "@nui-kit/react";
// 서브패스로 좁힐 때
import { Radio } from "@nui-kit/react/radio";
import "@nui-kit/react/styles/radio.css";   // 온디맨드일 때

기본

결제 수단

신용카드

계좌이체

휴대폰 결제

RadioGroup 이 name 을 전파한다

가로 배치

신용카드

계좌이체

휴대폰 결제

direction="row"

상태

<Radio name="plan" checked={v === "a"} onChange={onChange} />

checked 가 다른 상태와 겹치면 함께 그린다

선택된 채로 에러면 빨강, 비활성이면 회색이다. 케이스마다 name 이 다르다. 같은 name 이면 브라우저가 하나만 선택되게 만든다.

그룹

RadioGroup 이 name 을 전파해 같은 그룹으로 묶는다. role="radiogroup" 이며 Field 의 label 을 aria-labelledby 로 연결한다. 그룹 자체에 aria-invalid 도 붙는다.

react-hook-form

라디오 그룹은 선택지 여러 개가 필드 하나를 채운다. 그래서 Controller 로 그룹을 감싸고 각 Radio 의 checked 를 field.value === value 로 잇는다. 에러는 RadioGroup 의 isError 에 준다.

요금제

무료

프로

팀

{
  "values": {
    "plan": null
  },
  "isValid": false
}

<Controller control={control} name="plan" rules={{ required: "…" }} render={({ field, fieldState }) => (<RadioGroup name={field.name} isError={!!fieldState.error}>…</RadioGroup>)} />

Controller — 그룹 하나가 필드 하나

RHFRadio 는 라디오 하나를 boolean 필드 하나로 잇는다. checked 를 Boolean(field.value) 로, 변경을 field.onChange(checked) 로 넘기므로 선택지 여러 개가 값 하나를 나눠 갖는 그룹에는 맞지 않는다. 지금은 위처럼 Controller 를 쓴다.

커스터마이징

컴포넌트	변수	기본값	비고
Checkbox · Radio · Switch	--nui-selector--border-width	`var(--nui-border-width-1)`	—
Checkbox · Radio · Switch	--nui-selector--size	`var(--nui-size-selector)`	— · 2자리를 함께 움직인다

API

Radio

이름	타입	기본값	설명
`className`	string \| undefined	—	—
`id`	string \| undefined	—	—
`isError`	boolean	—	—
`readOnly`	boolean	—	—

RadioProps 에서 자동 생성됨 (components/Radio/Radio.tsx). 표준 DOM 속성 304개는 그대로 전달되며 표에서 생략했다.

RadioGroup

이름	타입	기본값	설명
`children` *	ReactNode	—	—
`direction`	"row" \| "column"	`"column"`	—
`disabled`	boolean	—	—
`isError`	boolean	—	—
`name`	string	—	하위 항목들이 공유할 input name
`readOnly`	boolean	—	—

RadioGroupProps 에서 자동 생성됨 (components/Radio/RadioGroup.tsx). 표준 DOM 속성 276개는 그대로 전달되며 표에서 생략했다.