Radio - Kitchen Sink

기본 사용법

같은 name을 가진 라디오들은 하나의 그룹으로 동작합니다.

Option 1 Option 2 Option 3

          <RadioGroup aria-label="옵션 선택"> <Radio name="option" value="option1"
          text="Option 1" /> <Radio name="option" value="option2" text="Option 2" />
          <Radio name="option" value="option3" text="Option 3" /> </RadioGroup>
        

외부 label 연결

noLabel prop을 사용하여 외부 label과 연결할 수 있습니다.

일반 배송

특급 배송

          <RadioGroup aria-label="배송 방법 선택"> <Radio id="shipping-standard"
          name="shipping" value="standard" noLabel /> <label for="shipping-standard">일반
          배송</label> </RadioGroup>
        

상태별 스타일링

checked 및 disabled 상태에 대한 스타일링이 자동으로 적용됩니다.

Checked (선택됨) Unchecked (선택 안 됨) Disabled Disabled (Checked)

          <RadioGroup aria-label="상태 예시"> <Radio name="state" value="checked"
          text="Checked" /> <Radio name="state" value="unchecked" text="Unchecked" />
          <Radio name="state-disabled" value="disabled" text="Disabled" disabled />
          </RadioGroup>
        

Radio Props

Prop	Type	Default	Description
`name`	string	-	라디오 그룹 이름 (필수, 같은 name을 가진 라디오들은 하나의 그룹)
`value`	string	-	라디오 버튼 값 (필수)
`id`	string	자동 생성	고유 ID (외부 label 연결 시 사용)
`checked`	boolean	false	초기 선택 상태
`disabled`	boolean	false	비활성화 상태
`text`	string	-	라벨 텍스트 (slot과 함께 사용 가능)
`noLabel`	boolean	false	내부 label 제거 여부 (외부 label 사용 시 true)