라디오 버튼 · tissue-ui

bash

npm install @tissue-ui/layout-react

tsx

import { Radio } from "@tissue-ui/layout-react";

언제 쓰나

플레이그라운드

요금제무료스탠다드프로

layout

tsx

<Radio
  name="plan"
  groupLabel="요금제"
  layout="column"
  value={value}
  onChange={setValue}
  options={[
    { value: "free", label: "무료" },
    { value: "standard", label: "스탠다드" },
    { value: "pro", label: "프로" },
  ]}
/>

예제

그룹(세로)

요금제무료스탠다드프로

가로 배치 · 비활성 옵션

layout="row" 로 가로 배치하고, 옵션별로 disabled 를 줄 수 있습니다.

결제 수단카드계좌이체포인트

오류

error 에 메시지를 주면 그룹이 오류 색으로 표시됩니다.

배송 방법일반 배송 (2~3일)빠른 배송 (당일)매장 픽업

배송 방법을 골라주세요.

속성

속성	타입	설명
name	string	같은 묶음으로 묶는 이름입니다.
options	node	선택지 목록입니다 (값·이름·비활성 여부).
value	string	고른 값입니다.
onChange	node	선택이 바뀔 때 실행됩니다.
layout	row \| column	세로·가로 배치를 정합니다 (기본 세로).

위 옵션 말고도 className·onClick 같은 일반 HTML 속성을 그대로 넘길 수 있습니다.

이 페이지의 옵션·상태는 실제 코드 정의에서 그대로 가져온 것입니다. 에이전트는 같은 내용을 llms.txt 로 읽습니다.

설치

언제 쓰나

플레이그라운드

예제

속성