Input - Radio
Last updated: 9/20/21
Radio inputs are used for selecting an option out of mutiple options
Base
Use the base class pier-input-radio to create a default input radio
HTML markup
<label class="pier-input-radio"
><input
type="radio"
class="pier-input-radio__input"
name="example-1"
value=""
/>
<div class="pier-input-radio__indicator"></div>
<span class="pier-input-radio__label">Label</span></label
><label class="pier-input-radio -m-l-4"
><input
type="radio"
class="pier-input-radio__input"
name="example-1"
value=""
checked=""
/>
<div class="pier-input-radio__indicator"></div>
<span class="pier-input-radio__label">Label</span></label
>
Sizes
Use the modifier classes pier-input-radio--sm, pier-input-radio--md, or pier-input-radio--lg to change the size of the input-radio.
HTML markup
<label class="pier-input-radio pier-input-radio--sm"
><input
type="radio"
class="pier-input-radio__input"
name="example-2"
value=""
/>
<div
class="pier-input-radio__indicator pier-input-radio__indicator--sm"
></div>
<span class="pier-input-radio__label">Label</span></label
><label class="pier-input-radio pier-input-radio--md -m-l-4"
><input
type="radio"
class="pier-input-radio__input"
name="example-2"
value=""
/>
<div class="pier-input-radio__indicator"></div>
<span class="pier-input-radio__label">Label</span></label
><label class="pier-input-radio pier-input-radio--lg -m-l-4"
><input
type="radio"
class="pier-input-radio__input"
name="example-2"
value=""
checked=""
/>
<div
class="pier-input-radio__indicator pier-input-radio__indicator--lg"
></div>
<span class="pier-input-radio__label">Label</span></label
>
Error
Use the modifier class pier-input-radio--error to change the state of the input radio to error.
HTML markup
<label class="pier-input-radio pier-input-radio--error"
><input
type="radio"
class="pier-input-radio__input"
name="example-3"
value=""
/>
<div class="pier-input-radio__indicator"></div>
<span class="pier-input-radio__label">Label</span></label
><label class="pier-input-radio pier-input-radio--error -m-l-4"
><input
type="radio"
class="pier-input-radio__input"
name="example-3"
value=""
checked=""
/>
<div class="pier-input-radio__indicator"></div>
<span class="pier-input-radio__label">Label</span></label
>
Disabled
Use the modifier class pier-input-radio--disabled to change the state of the input radio to disabled.
HTML markup
<label class="pier-input-radio pier-input-radio--disabled"
><input
type="radio"
class="pier-input-radio__input"
name="example-1"
value=""
/>
<div class="pier-input-radio__indicator"></div>
<span class="pier-input-radio__label">Label</span></label
>
Dark
Use the modifier class pier-input-radio--dark to change the style of the input radio for dark UI themes.
HTML markup
<label class="pier-input-radio pier-input-radio--dark"
><input
type="radio"
class="pier-input-radio__input"
name="example-4"
value=""
/>
<div class="pier-input-radio__indicator"></div>
<span class="pier-input-radio__label">Label</span></label
><label class="pier-input-radio pier-input-radio--dark -m-l-4"
><input
type="radio"
class="pier-input-radio__input"
name="example-4"
value=""
checked=""
/>
<div class="pier-input-radio__indicator"></div>
<span class="pier-input-radio__label">Label</span></label
>
Error Dark
Use the modifier class pier-input-radio--dark to change the style of the input radio for dark UI themes.
HTML markup
<label class="pier-input-radio pier-input-radio--error pier-input-radio--dark"
><input
type="radio"
class="pier-input-radio__input pier-input-radio__input"
name="example-5"
value=""
/>
<div class="pier-input-radio__indicator"></div>
<span class="pier-input-radio__label">Label</span></label
><label
class="
pier-input-radio pier-input-radio--error pier-input-radio--dark
-m-l-4
"
><input
type="radio"
class="pier-input-radio__input pier-input-radio__input"
name="example-5"
value=""
checked=""
/>
<div class="pier-input-radio__indicator"></div>
<span class="pier-input-radio__label">Label</span></label
>
© 2021 Gumgum, Inc.
