컴포넌트FOX · Radio

라디오

여러 보기 중 꼭 하나를 고르는 선택이에요. 보기가 모두 한눈에 보여야 할 때 써요. 네모 안이 채워지면 고른 거예요.

기본

묶음 안에서 위아래 화살표 키를 누르면 선택이 옆 보기로 옮겨 가요. 탭 키는 묶음에 한 번만 멈춰요.

RADIO GROUP

카드계좌이체포인트

<RadioGroup defaultValue="card" aria-label="결제 수단">
  <Radio value="card">카드</Radio>
  <Radio value="bank">계좌이체</Radio>
  <Radio value="point">포인트</Radio>
</RadioGroup>

가로로 두기

보기가 두세 개이고 짧을 때만 가로로 둬요.

INLINE

1주1개월1년

<RadioGroup inline defaultValue="m" aria-label="기간">
  <Radio value="w">1주</Radio>
  <Radio value="m">1개월</Radio>
  <Radio value="y">1년</Radio>
</RadioGroup>

꺼짐

묶음 전체를 끄거나 보기 하나만 끌 수 있어요.

DISABLED

일반 배송새벽 배송 (이 지역은 안 돼요)

<RadioGroup defaultValue="a" aria-label="배송">
  <Radio value="a">일반 배송</Radio>
  <Radio value="b" disabled>새벽 배송</Radio>
</RadioGroup>

이렇게 써요

아침저녁

이렇게처음부터 하나를 골라 둬요. 라디오는 고른 뒤 비울 수 없어요.

아침저녁

이렇게 말고아무것도 고르지 않은 채로 두면 무엇이 기본인지 몰라요.

보기 2~5개는 라디오로 한눈에 보여 줘요.

이렇게보기가 적으면 라디오, 많으면 목록이나 선택창을 써요.

여러 개를 고르게 하려고 라디오를 쓰면 안 돼요.

이렇게 말고여러 개를 고를 때는 체크박스나 칩을 써요.

속성

속성	값	기본값	설명
`value / defaultValue`	string	없음	RadioGroup. 고른 값(제어, 비제어)
`onChange`	(value: string) => void	없음	RadioGroup. 고른 값이 바뀌면 불러요
`name`	string	없음	RadioGroup. 폼 이름. 비우면 자동
`inline`	boolean	`false`	RadioGroup. 가로로 나란히
`disabled`	boolean	`false`	RadioGroup 전체 또는 Radio 하나
`value`	string	없음	Radio. 이 보기를 구분하는 값(필수)