Radio Button Usage

리스트 중 한 항목을 선택할 수 있습니다.

Layout

Orientation

Radio button group을 가로 또는 세로 방향으로 배치하여 사용할 수 있습니다. 텍스트 길이가 길거나 선택지가 많은 리스트에서는 세로 방향의 배치가 권장됩니다. 반응형 디자인 시, 모바일 환경에서는 horizontal 리스트가 vertical로 변환되어야 합니다.

Vertical

• 선택지의 텍스트 길이가 길거나, 세 개 이상의 많은 선택지가 주어질 때 적합합니다.
• 가독성 및 접근성이 뛰어나며 텍스트를 위한 더 많은 공간을 제공합니다.
• 사용자가 선택 항목을 쉽게 스캔 및 비교할 수 있어 form 또는 긴 목록에 적합합니다.

Horizontal

• 두 개에서 세 개의 옵션이 있을 때 컴팩트한 배열에 적합합니다.
• 세로 공간 절약이 필요한 경우 유용하며, 툴바나 설정에서 잘 사용됩니다.
• 제한된 공간에서 시각적 균형을 맞추는 데 도움이 됩니다.
• 모바일 환경에서는 사용을 권장하지 않습니다.

Spacing

Radio button group 내 각 선택지 사이의 간격을 일정하게 유지합니다. 가로 배치 시 spacing/300, 세로 배치 시 spacing/100을 각각 적용합니다.

✕Don'tRequired

선택지 사이에 임의의 간격을 적용하지 않습니다.

✕Don'tRequired

선택지 간 간격을 일관되지 않게 적용하지 않습니다.

Content

Validation

Radio button group에서 선택 값에 대한 validation은 그룹 단위에서 이루어지기 때문에, validation message는 각 선택지가 아닌 group 하위에 노출합니다.

✕Don'tRequired

Group 선택 값에 대한 validation message를 각 선택지 하위에 노출하지 않습니다.

✓DoRecommended

개별 선택지에 대한 validation은 선택지 하위에서 제공합니다.

✓DoRecommended

Helper text가 제공되는 경우 validation message는 helper text 위에 위치합니다.

Behaviors

Interactions

Radio button 자체 또는 항목 텍스트를 클릭하여 항목을 선택합니다. 가장 첫 항목을 기본으로 선택 상태로 제공하며, 한 리스트에서 한 항목만 선택할 수 있습니다.