---
title: Radio Buttons
section-title: UI Components
docs: true

navgroup: styleguide
navsub: ui-components
navactive: radio-buttons
---
<h2 class="sg-sectionHeading">Radio Buttons column</h2>
{{#>demo-block }}
  {{> je-input-formControl type='radio' typeclass='o-formControl-indicator--radio' labeltext='Radio 1' inputid='radio1Column' name='sortbyColumn' value='radio1' }}
  {{> je-input-formControl type='radio' typeclass='o-formControl-indicator--radio' labeltext='Radio 2' inputid='radio2Column' name='sortbyColumn' value='radio2' }}
  {{> je-input-formControl type='radio' typeclass='o-formControl-indicator--radio' labeltext='Radio 3' inputid='radio3Column' name='sortbyColumn' value='radio3' }}
  {{> je-input-formControl type='radio' typeclass='o-formControl-indicator--radio' labeltext='Radio 4' inputid='radio4Column' name='sortbyColumn' value='radio4' }}
  {{> je-input-formControl type='radio' typeclass='o-formControl-indicator--radio' labeltext='Radio 5' inputid='radio5Column' name='sortbyColumn' value='radio5' }}
{{/demo-block }}

<h2 class="sg-sectionHeading">Radio Buttons inline</h2>
{{#>demo-block }}
  {{> je-input-formControl type='radio' typeclass='o-formControl-indicator--radio' labeltext='Radio 1' inputid='radio1Inline' name='sortbyInline' value='radio1' isInline=true }}
  {{> je-input-formControl type='radio' typeclass='o-formControl-indicator--radio' labeltext='Radio 2' inputid='radio2Inline' name='sortbyInline' value='radio2' isInline=true }}
  {{> je-input-formControl type='radio' typeclass='o-formControl-indicator--radio' labeltext='Radio 3' inputid='radio3Inline' name='sortbyInline' value='radio3' isInline=true }}
  {{> je-input-formControl type='radio' typeclass='o-formControl-indicator--radio' labeltext='Radio 4' inputid='radio4Inline' name='sortbyInline' value='radio4' isInline=true }}
  {{> je-input-formControl type='radio' typeclass='o-formControl-indicator--radio' labeltext='Radio 5' inputid='radio5Inline' name='sortbyInline' value='radio5' isInline=true }}
{{/demo-block }}

<h2 class="sg-sectionHeading">Radio Buttons column & disabled</h2>
{{#>demo-block }}
  {{> je-input-formControl type='radio' typeclass='o-formControl-indicator--radio' labeltext='Radio 1' inputid='radio1ColumnDisabled' name='sortbyColumnDisabled' value='radio1' isDisabled=true }}
  {{> je-input-formControl type='radio' typeclass='o-formControl-indicator--radio' labeltext='Radio 2' inputid='radio2ColumnDisabled' name='sortbyColumnDisabled' value='radio2' isDisabled=true }}
  {{> je-input-formControl type='radio' typeclass='o-formControl-indicator--radio' labeltext='Radio 3' inputid='radio3ColumnDisabled' name='sortbyColumnDisabled' value='radio3' isDisabled=true }}
  {{> je-input-formControl type='radio' typeclass='o-formControl-indicator--radio' labeltext='Radio 4' inputid='radio4ColumnDisabled' name='sortbyColumnDisabled' value='radio4' isDisabled=true }}
  {{> je-input-formControl type='radio' typeclass='o-formControl-indicator--radio' labeltext='Radio 5' inputid='radio5ColumnDisabled' name='sortbyColumnDisabled' value='radio5' isDisabled=true }}
{{/demo-block }}

<h2 class="sg-sectionHeading">Radio Buttons inline & disabled</h2>
{{#>demo-block }}
  {{> je-input-formControl type='radio' typeclass='o-formControl-indicator--radio' labeltext='Radio 1' inputid='radio1InlineDisabled' name='sortbyInlineDisabled' value='radio1' isInline=true isDisabled=true }}
  {{> je-input-formControl type='radio' typeclass='o-formControl-indicator--radio' labeltext='Radio 2' inputid='radio2InlineDisabled' name='sortbyInlineDisabled' value='radio2' isInline=true isDisabled=true }}
  {{> je-input-formControl type='radio' typeclass='o-formControl-indicator--radio' labeltext='Radio 3' inputid='radio3InlineDisabled' name='sortbyInlineDisabled' value='radio3' isInline=true isDisabled=true }}
  {{> je-input-formControl type='radio' typeclass='o-formControl-indicator--radio' labeltext='Radio 4' inputid='radio4InlineDisabled' name='sortbyInlineDisabled' value='radio4' isInline=true isDisabled=true }}
  {{> je-input-formControl type='radio' typeclass='o-formControl-indicator--radio' labeltext='Radio 5' inputid='radio5InlineDisabled' name='sortbyInlineDisabled' value='radio5' isInline=true isDisabled=true }}
{{/demo-block }}