Pantoia Design
Components

RadioGroup

사용 예시

하나만 고르는 목록

항목의 이름은 RadioGroupItemLabel로 항목 안에 적어요.

tsx
<RadioGroup value={textSize} onValueChange={setTextSize}>  <RadioGroupItem value="small">    <RadioGroupItemLabel>작게</RadioGroupItemLabel>  </RadioGroupItem>  <RadioGroupItem value="medium">    <RadioGroupItemLabel>보통</RadioGroupItemLabel>  </RadioGroupItem>  <RadioGroupItem value="large">    <RadioGroupItemLabel>크게</RadioGroupItemLabel>  </RadioGroupItem></RadioGroup>

항목 설명

라벨은 짧게 쓰고 고르는 데 필요한 정보는 RadioGroupItemDescription에 적어요.

한 달에 3개까지 만들어요

개수 제한 없이 만들어요

여러 명이 함께 써요

tsx
<RadioGroup value={plan} onValueChange={setPlan}>  <RadioGroupItem value="free">    <RadioGroupItemLabel>무료</RadioGroupItemLabel>    <RadioGroupItemDescription>한 달에 3개까지 만들어요</RadioGroupItemDescription>  </RadioGroupItem>  <RadioGroupItem value="personal">    <RadioGroupItemLabel>개인</RadioGroupItemLabel>    <RadioGroupItemDescription>개수 제한 없이 만들어요</RadioGroupItemDescription>  </RadioGroupItem>  <RadioGroupItem value="team">    <RadioGroupItemLabel>팀</RadioGroupItemLabel>    <RadioGroupItemDescription>여러 명이 함께 써요</RadioGroupItemDescription>  </RadioGroupItem></RadioGroup>

개수 제한 없이 만들어요

여러 명이 함께 써요

RadioGroup의 이름

Field로 감싸면 FieldLabel이 RadioGroup 전체의 이름이 돼요.

출발 하루 전까지 바꿀 수 있어요.

tsx
<Field>  <FieldLabel>좌석</FieldLabel>  <RadioGroup value={seat} onValueChange={setSeat}>    <RadioGroupItem value="window">      <RadioGroupItemLabel>창가</RadioGroupItemLabel>    </RadioGroupItem>    <RadioGroupItem value="aisle">      <RadioGroupItemLabel>복도</RadioGroupItemLabel>    </RadioGroupItem>  </RadioGroup>  <FieldHelp>출발 하루 전까지 바꿀 수 있어요.</FieldHelp></Field>

고르지 않았을 때 알리기

오류는 항목마다 두지 않고 RadioGroup 전체에 하나만 표시해요.

받을 시간을 하나 고르세요.

tsx
<Field invalid={!deliveryTime}>  <FieldLabel>받을 시간</FieldLabel>  <RadioGroup value={deliveryTime} onValueChange={setDeliveryTime}>    <RadioGroupItem value="morning">      <RadioGroupItemLabel>오전</RadioGroupItemLabel>    </RadioGroupItem>    <RadioGroupItem value="afternoon">      <RadioGroupItemLabel>오후</RadioGroupItemLabel>    </RadioGroupItem>    <RadioGroupItem value="evening">      <RadioGroupItemLabel>저녁</RadioGroupItemLabel>    </RadioGroupItem>  </RadioGroup>  {!deliveryTime && <FieldError>받을 시간을 하나 고르세요.</FieldError>}</Field>

비활성

고를 수 없는 항목은 숨기지 말고 비활성으로 두고, 이유를 설명에 적어요.

남은 자리가 없어요

tsx
<RadioGroup value={seatClass} onValueChange={setSeatClass}>  <RadioGroupItem value="standard">    <RadioGroupItemLabel>일반석</RadioGroupItemLabel>  </RadioGroupItem>  <RadioGroupItem value="premium">    <RadioGroupItemLabel>우등석</RadioGroupItemLabel>  </RadioGroupItem>  <RadioGroupItem value="first" disabled>    <RadioGroupItemLabel>특실</RadioGroupItemLabel>    <RadioGroupItemDescription>남은 자리가 없어요</RadioGroupItemDescription>  </RadioGroupItem></RadioGroup><RadioGroup value={textSize} onValueChange={setTextSize} disabled>  <RadioGroupItem value="small">    <RadioGroupItemLabel>작게</RadioGroupItemLabel>  </RadioGroupItem>  <RadioGroupItem value="medium">    <RadioGroupItemLabel>보통</RadioGroupItemLabel>  </RadioGroupItem></RadioGroup>

가로 배치

라벨이 짧고 항목이 3개 이하일 때만 가로로 배치해요. 설명이 있으면 세로로 배치해요.

tsx
<RadioGroup value={textSize} onValueChange={setTextSize} className="flex-row gap-block">  <RadioGroupItem value="small">    <RadioGroupItemLabel>작게</RadioGroupItemLabel>  </RadioGroupItem>  <RadioGroupItem value="medium">    <RadioGroupItemLabel>보통</RadioGroupItemLabel>  </RadioGroupItem>  <RadioGroupItem value="large">    <RadioGroupItemLabel>크게</RadioGroupItemLabel>  </RadioGroupItem></RadioGroup>

컨트롤

값"personal"
tsx
<RadioGroup value={plan} onValueChange={setPlan}>  <RadioGroupItem value="personal">    <RadioGroupItemLabel>개인</RadioGroupItemLabel>  </RadioGroupItem>  <RadioGroupItem value="team">    <RadioGroupItemLabel>팀</RadioGroupItemLabel>  </RadioGroupItem></RadioGroup>

명세

이름
이름값기본
RadioGroup
valuestring | null-
호출하는 쪽에서 고른 항목을 관리해요. 고르지 않았으면 null이에요.
defaultValuestring | null-
처음 값이에요.
onValueChange(value: string | null, eventDetails) => void-
고른 항목이 바뀌면 호출돼요.
colorneutral, info, success, warning, dangerneutral
의미에 맞는 색이 있을 때만 바꿔요.
disabledbooleanfalse
안의 RadioGroupItem이 모두 비활성이 돼요.
classNamestring-
모든 하위 컴포넌트에 쓸 수 있어요.
RadioGroupItem
valuestring필수
이 항목을 고르면 RadioGroup의 value가 이 값이 돼요.
disabledbooleanfalse