Input - Toggle
Last updated: 9/20/21
Toggle inputs are used for selecting a boolean value of on or off.
Base
Use the base class pier-input-toggle to create a default input toggle
HTML markup
<label class="pier-input-toggle"
><input
type="checkbox"
class="pier-input-toggle__input"
name="example-1"
value=""
/>
<div class="pier-input-toggle__indicator"></div>
<span class="pier-input-toggle__label">Label</span></label
>
Sizes
Use the modifier classes pier-input-toggle--sm, pier-input-toggle--md, or pier-input-toggle--lg to change the size of the input-toggle.
HTML markup
<label class="pier-input-toggle pier-input-toggle--sm"
><input
type="checkbox"
class="pier-input-toggle__input"
name="example-1"
value=""
/>
<div
class="pier-input-toggle__indicator pier-input-toggle__indicator--sm"
></div>
<span class="pier-input-toggle__label">Label</span></label
><label class="pier-input-toggle pier-input-toggle--md -m-l-5"
><input
type="checkbox"
class="pier-input-toggle__input"
name="example-1"
value=""
/>
<div class="pier-input-toggle__indicator"></div>
<span class="pier-input-toggle__label">Label</span></label
><label class="pier-input-toggle pier-input-toggle--lg -m-l-5"
><input
type="checkbox"
class="pier-input-toggle__input"
name="example-1"
value=""
/>
<div
class="pier-input-toggle__indicator pier-input-toggle__indicator--lg"
></div>
<span class="pier-input-toggle__label">Label</span></label
>
Error
Use the modifier class pier-input-toggle--error to change the state of the input toggle to error.
HTML markup
<label class="pier-input-toggle pier-input-toggle--error"
><input
type="checkbox"
class="pier-input-toggle__input"
name="example-1"
value=""
/>
<div class="pier-input-toggle__indicator"></div>
<span class="pier-input-toggle__label">Label</span></label
>
Disabled
Use the modifier class pier-input-toggle--disabled to change the state of the input toggle to disabled.
HTML markup
<label class="pier-input-toggle pier-input-toggle--disabled"
><input
type="checkbox"
class="pier-input-toggle__input"
name="example-1"
value=""
/>
<div class="pier-input-toggle__indicator"></div>
<span class="pier-input-toggle__label">Label</span></label
>
Dark
Use the modifier class pier-input-toggle--dark to change the style of the input toggle for dark UI themes.
HTML markup
<label class="pier-input-toggle pier-input-toggle--dark"
><input
type="checkbox"
class="pier-input-toggle__input"
name="example-1"
value=""
/>
<div class="pier-input-toggle__indicator"></div>
<span class="pier-input-toggle__label">Label</span></label
>
Error Dark
Use the modifier class pier-input-toggle--dark to change the style of the input toggle for dark UI themes.
HTML markup
<label
class="pier-input-toggle pier-input-toggle--error pier-input-toggle--dark"
><input
type="checkbox"
class="pier-input-toggle__input"
name="example-1"
value=""
/>
<div class="pier-input-toggle__indicator"></div>
<span class="pier-input-toggle__label">Label</span></label
>
© 2021 Gumgum, Inc.
