Odyssey styleguide

Forms

All the components that require input from the user.

Checkbox

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>forms.checkbox-</insert-markup>
.odyssey-check__label_error
error check
<insert-markup>forms.checkbox-0</insert-markup>
Markup 
<input type="checkbox" id="odyssey-check"/>
<label class="odyssey-check__label [modifier class]" for="odyssey-check">
</label>
Source: src/forms/checkbox.less, line 1

Checkbox group

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>forms.checkbox.group-</insert-markup>
.odyssey-checkgroup--disabled
input disabled
<insert-markup>forms.checkbox.group-0</insert-markup>
.odyssey-checkgroup--small
small checkboxes
<insert-markup>forms.checkbox.group-1</insert-markup>
Markup 
<div class="odyssey-checkgroup [modifier class]">
	<input type="checkbox" id="remember" />
	<label class="odyssey-check__label" for="remember"></label>
	<label for="remember" class="odyssey-checkgroup__label">Remember me</label>
</div>
Source: src/forms/checkbox.less, line 134

Input

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Add the disabled html attribute on the input for the disabled style.

<insert-markup>forms.input-</insert-markup>
.odyssey-inputgroup__input--error
error input
<insert-markup>forms.input-0</insert-markup>
Markup 
<input id="field" class="odyssey-inputgroup__input [modifier class]" type="text" name="transactionId">
Source: src/forms/text_inputs.less, line 144

Input group

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>forms.input.group-</insert-markup>
.odyssey-inputgroup--error
Error input
<insert-markup>forms.input.group-0</insert-markup>
.odyssey-inputgroup--correct
Correct input
<insert-markup>forms.input.group-1</insert-markup>
.odyssey-inputgroup--disabled
Disabled input
<insert-markup>forms.input.group-2</insert-markup>
Markup 
<div class="odyssey-inputgroup [modifier class]">
    <label for="transactionId" class="odyssey-inputgroup__label">transaction ID</label>
    <input id="transactionId" class="odyssey-inputgroup__input" type="text" name="transactionId" value="WS-5332-5533-2817">
	<label for="transactionId" class="odyssey-inputgroup__error">that’s not a correct e-mail address</label>
</div>
Source: src/forms/text_inputs.less, line 64

Input Check

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>forms.input.check-</insert-markup>
Transaction ID This interval is not compatible with the current settings
.odyssey-inputgroup--error
Error Checkinput
<insert-markup>forms.input.check-0</insert-markup>
Transaction ID This interval is not compatible with the current settings
.odyssey-inputgroup--disabled
Disabled Checkinput
<insert-markup>forms.input.check-1</insert-markup>
Transaction ID This interval is not compatible with the current settings
Markup 
<div class="odyssey-inputgroup [modifier class]">
	<span class="odyssey-inputgroup__label">Transaction ID</span>
	<input class="odyssey-input-check" type="checkbox" id="input-check" name="input-check"/>
	<label  class="odyssey-input-check__label" for="input-check">
		<div class="odyssey-input-check__check"></div>
		<span class="odyssey-input-check__text">Every day</span>
	</label>
	<span class="odyssey-inputgroup__error">This interval is not compatible with the current settings</span>
</div>
Source: src/forms/text_inputs.less, line 574

Input Dropdown

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>forms.input.dropdown-</insert-markup>
.odyssey-inputgroup--error
Error Input
<insert-markup>forms.input.dropdown-0</insert-markup>
.odyssey-inputgroup--disabled
Disable Input, this disables the text input and select.
<insert-markup>forms.input.dropdown-1</insert-markup>
Markup 
<div class="odyssey-inputgroup [modifier class]">
	<label for="input-dropdown" class="odyssey-inputgroup__label">Invite new user</label>
	<div class="odyssey-input-dropdown">
		<input class="odyssey-input-dropdown__input" id="input-dropdown" placeholder="Invite Someone">
		<select class="odyssey-input-dropdown__select">
			<option>can edit</option>
			<option>can view</option>
			<option>admin</option>
		</select>
	</div>
	<label for="input-dropdown" class="odyssey-inputgroup__error">That’s not a correct e-mail address</label>
</div>
<hr id="ignore-me" style="opacity: 0.1; margin: 25px 0px;"/>
<div class="odyssey-inputgroup [modifier class]">
	<div class="odyssey-input-dropdown">
		<input class="odyssey-input-dropdown__input" id="input-dropdown" placeholder="Invite Someone">
		<select class="odyssey-input-dropdown__select">
			<option>can edit</option>
			<option>can view</option>
			<option>admin</option>
		</select>
	</div>
</div>
Source: src/forms/text_inputs.less, line 255

Input Label

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>forms.input.label-</insert-markup>
Markup 
<label for="field" class="odyssey-inputgroup__label">Transaction ID</label>
Source: src/forms/text_inputs.less, line 129

Input Labeled

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>forms.input.labeled-</insert-markup>
Transaction ID please fill in a transaction amount
odyssey-inputgroup--error
Error input odyssey-inputgroup--correct - Correct input odyssey-inputgroup--disabled - Disabled input
<insert-markup>forms.input.labeled-0</insert-markup>
Transaction ID please fill in a transaction amount
Markup 
<div class="odyssey-inputgroup [modifier class]">
	<span class="odyssey-inputgroup__label">Transaction ID</span>
	<label class="odyssey-input-labeled" for="input-labeled">
		<span class="odyssey-input-labeled__label">
			<i class="odyssey-input-labeled__icon"></i>
		</span>
		<input class="odyssey-input-labeled__input" placeholder="Enter value" id="input-labeled">
	</label>
	<span class="odyssey-inputgroup__error">please fill in a transaction amount</span>
</div>
<hr id="ignore-me" style="opacity: 0.1; margin: 25px 0px;"/>
<div class="odyssey-inputgroup [modifier class]">
	<label class="odyssey-input-labeled" for="input-labeled">
		<input class="odyssey-input-labeled__input" placeholder="Enter value" id="input-labeled">
		<span class="odyssey-input-labeled__label">Days</span>
	</label>
</div>
Source: src/forms/text_inputs.less, line 650

Input Metric

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>forms.input.metric-</insert-markup>
odyssey-inputgroup--error
error inputgroup
<insert-markup>forms.input.metric-0</insert-markup>
odyssey-inputgroup--disabled
disabled inputgroup, this disables the text input and select.
<insert-markup>forms.input.metric-1</insert-markup>
Markup 
<div class="odyssey-inputgroup [modifier class]">
    <label for="metric-input" class="odyssey-inputgroup__label">Transaction ID</label>
    <div class="odyssey-input-metric">
		<select class="odyssey-input-metric__select">
			<option>EUR</option>
			<option>USD</option>
			<option>NZD</option>
		</select>
		<input class="odyssey-inputgroup__input" placeholder="Enter value" id="metric-input">
	</div>
	<label for="metric-input" class="odyssey-inputgroup__error">That’s not a correct e-mail address</label>
</div>
<hr id="ignore-me" style="opacity: 0.1; margin: 25px 0px;"/>
<div class="odyssey-inputgroup [modifier class]">
    <div class="odyssey-input-metric">
		<select class="odyssey-input-metric__select">
			<option>EUR</option>
			<option>USD</option>
			<option>NZD</option>
		</select>
		<input class="odyssey-inputgroup__input" placeholder="Enter value" id="metric-input">
	</div>
</div>
Source: src/forms/text_inputs.less, line 355

Input Metric and Dropdown

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>forms.input.metricdropdown-</insert-markup>
.odyssey-inputgroup--error
error input
<insert-markup>forms.input.metricdropdown-0</insert-markup>
.odyssey-inputgroup--disabled
disabled input
<insert-markup>forms.input.metricdropdown-1</insert-markup>
Markup 
<div class="odyssey-inputgroup [modifier class]">
	<label for="metric-dropdown-input"class="odyssey-inputgroup__label">Transaction ID</label>
	<div class="odyssey-input-metric">
		<select class="odyssey-input-metric__metric odyssey-input-metric__select">
			<option>EUR</option>
			<option>USD</option>
		</select>
		<div class="odyssey-input-dropdown">
			<input id="metric-dropdown-input"class="odyssey-input-dropdown__input"placeholder="Enter value">
			<select class="odyssey-input-dropdown__select">
				<option>value</option>
				<option>percentage</option>
			</select>
		</div>
	</div>
	<label for="metric-dropdown-input"class="odyssey-inputgroup__error">That’s not a correct e-mail address</label>
</div>
<hr id="ignore-me" style="opacity: 0.1; margin: 25px 0px;"/>
<div class="odyssey-inputgroup [modifier class]">
	<div class="odyssey-input-metric">
		<select class="odyssey-input-metric__metric odyssey-input-metric__select">
			<option>EUR</option>
			<option>USD</option>
		</select>
		<div class="odyssey-input-dropdown">
			<input class="odyssey-input-dropdown__input" placeholder="Enter value">
			<select class="odyssey-input-dropdown__select">
				<option>value</option>
				<option>percentage</option>
			</select>
		</div>
	</div>
</div>
Source: src/forms/text_inputs.less, line 761

Input Radio

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>forms.input.radio-</insert-markup>
Transaction ID This interval is not compatible with the current settings
.odyssey-inputgroup--error
Error Radioinput
<insert-markup>forms.input.radio-0</insert-markup>
Transaction ID This interval is not compatible with the current settings
.odyssey-inputgroup--disabled
Disabled Radioinput
<insert-markup>forms.input.radio-1</insert-markup>
Transaction ID This interval is not compatible with the current settings
Markup 
<div class="odyssey-inputgroup [modifier class]">
	<span class="odyssey-inputgroup__label">Transaction ID</span>
	<input class="odyssey-input-radio" type="radio" id="radio" name="radio"/>
	<label class="odyssey-input-radio__label" for="radio">
		<div class="odyssey-input-radio__radio"></div>
		<span class="odyssey-input-radio__text">Every day</span>
	</label>
	<input class="odyssey-input-radio" type="radio" id="radio-2" name="radio"/>
	<label class="odyssey-input-radio__label" for="radio-2">
		<div class="odyssey-input-radio__radio"></div>
		<span class="odyssey-input-radio__text">Every month</span>
	</label>
	<span class="odyssey-inputgroup__error">This interval is not compatible with the current settings</span>
</div>
Source: src/forms/text_inputs.less, line 463

Search Input

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>forms.input.search-</insert-markup>
.odyssey-searchgroup--error
error input
<insert-markup>forms.input.search-0</insert-markup>
Markup 
<div class="odyssey-searchgroup [modifier class]">
    <input class="odyssey-searchgroup__input" placeholder="search..." type="search">
    <i class="odyssey-searchgroup__image"></i>
</div>
Source: src/forms/text_inputs.less, line 183

Numeric Stepper

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>forms.numericstepper-</insert-markup>
.odyssey-numeric-stepper--disabled
Positive statistic
<insert-markup>forms.numericstepper-0</insert-markup>
Markup 
<label class="odyssey-numeric-stepper [modifier class]">
	<input id="numericStepper" class="odyssey-numeric-stepper__input" type="number" name="numericStepper" value="5" hidden>
	<i class="odyssey-numeric-stepper__minus"></i>
	<span class="odyssey-numeric-stepper__value">5</span>
	<i class="odyssey-numeric-stepper__plus"></i>
</label>
Source: src/forms/numeric_stepper.less, line 1

Radio Button

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>forms.radio-</insert-markup>
.odyssey-radio__label_error
error radio
<insert-markup>forms.radio-0</insert-markup>
Markup 
<input type="radio" id="odyssey-radio" name="odyssey-radio-name"/>
<label class="odyssey-radio__label [modifier class]" for="odyssey-radio">
	<span class="odyssey-radio__bg"></span>
</label>
<input type="radio" id="odyssey-radio-2" name="odyssey-radio-name"/>
<label class="odyssey-radio__label [modifier class]" for="odyssey-radio-2">
	<span class="odyssey-radio__bg"></span>
</label>
Source: src/forms/radio_button.less, line 1

Radio Button Group

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>forms.radio.group-</insert-markup>
.odyssey-radiogroup--small
small radio
<insert-markup>forms.radio.group-0</insert-markup>
.odyssey-radiogroup--disabled
disabled radio
<insert-markup>forms.radio.group-1</insert-markup>
Markup 
<div class="odyssey-radiogroup [modifier class]">
	<input type="radio" id="radio" name="radio-name"/>
	<label class="odyssey-radio__label" for="radio"><span class="odyssey-radio__bg"></span></label>
	<label for="radio" class="odyssey-radiogroup__label">Development</label>
</div>
<div class="odyssey-radiogroup [modifier class]">
	<input type="radio" id="radio-2" name="radio-name"/>
	<label class="odyssey-radio__label" for="radio-2"><span class="odyssey-radio__bg"></span></label>
	<label for="radio-2" class="odyssey-radiogroup__label">Design</label>
</div>
Source: src/forms/radio_button.less, line 119

Select

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>forms.select-</insert-markup>
Markup 
<select class="odyssey-inputgroup__select">
	<option>First</option>
	<option>Second</option>
	<option>Third</option>
</select>
Source: src/forms/select.less, line 1

Slider

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>forms.slider-</insert-markup>
Markup 
<div class="odyssey-slider ">
    <div class="odyssey-slider__label-wrapper">
        <label>Max media spend:</label>
        <label class="odyssey-slider__label--bold">1%</label>
    </div>
    <div class="odyssey-slider__data">
        <input list="datalist" value="20" min="1" max="100" step="1" type="range"/>
        <datalist class="odyssey-slider__data--ticks">
            <option class="odyssey-slider__data--tick"/>
            <option class="odyssey-slider__data--tick"/>
            <option class="odyssey-slider__data--tick"/>
            <option class="odyssey-slider__data--tick"/>
            <option class="odyssey-slider__data--tick"/>
            <option class="odyssey-slider__data--tick"/>
            <option class="odyssey-slider__data--tick"/>
            <option class="odyssey-slider__data--tick"/>
            <option class="odyssey-slider__data--tick"/>
            <option class="odyssey-slider__data--tick"/>
            <option class="odyssey-slider__data--tick"/>
            <option class="odyssey-slider__data--tick"/>
            <option class="odyssey-slider__data--tick"/>
            <option class="odyssey-slider__data--tick"/>
            <option class="odyssey-slider__data--tick"/>
            <option class="odyssey-slider__data--tick"/>
            <option class="odyssey-slider__data--tick"/>
        </datalist>
        <datalist class="odyssey-slider__data--labels">
            <option value="1" label="1%">1%</option>
            <option value="25" label="25%">25%</option>
            <option value="50" label="50%">50%</option>
            <option value="75" label="75%">75%</option>
            <option value="100" label="100%">100%</option>
        </datalist>
    </div>
</div>
Source: src/forms/slider.less, line 1

Source selector

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>forms.sourceselect-</insert-markup>
  • Header 1
  • Parent
  • Parent
  • Parent
  • Header 2
  • Child
  • Child
  • Child
  • Header 3
  • Child
Markup 
<div class="odyssey-source-select">
    <ul class="odyssey-source-select__panel">
		<li class="odyssey-source-select__panel__header">
			<span>Header 1</span>
		</li>
        <li class="odyssey-source-select__panel__item odyssey-source-select__panel__item--active">
            <span class="odyssey-source-select__panel__item__name">Parent</span>
        </li>
        <li class="odyssey-source-select__panel__item">
            <span class="odyssey-source-select__panel__item__name">Parent</span>
        </li>
        <li class="odyssey-source-select__panel__item">
            <span class="odyssey-source-select__panel__item__name">Parent</span>
        </li>
    </ul>
    <ul class="odyssey-source-select__panel">
		<li class="odyssey-source-select__panel__header">
			<span>Header 2</span>
		</li>
        <li class="odyssey-source-select__panel__item odyssey-source-select__panel__item--active">
            <span class="odyssey-source-select__panel__item__name">Child</span>
        </li>
        <li class="odyssey-source-select__panel__item">
            <span class="odyssey-source-select__panel__item__name">Child</span>
        </li>
        <li class="odyssey-source-select__panel__item">
            <span class="odyssey-source-select__panel__item__name">Child</span>
        </li>
    </ul>
    <ul class="odyssey-source-select__panel">
		<li class="odyssey-source-select__panel__header">
			<span>Header 3</span>
		</li>
        <li class="odyssey-source-select__panel__item">
            <span class="odyssey-source-select__panel__item__name">Child</span>
        </li>
    </ul>
</div>
Source: src/forms/source_select.less, line 1

Switch

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>forms.switch-</insert-markup>
.odyssey-switch--small
small switch
<insert-markup>forms.switch-0</insert-markup>
Markup 
<div class="odyssey-switch [modifier class]">
	<label class="odyssey-switch__label" for="switch-checkbox">
		<input type="checkbox" id="switch-checkbox">
		<span class="odyssey-switch__item">Annual</span>
		<span class="odyssey-switch__item">Monthly</span>
	</label>
</div>
Source: src/forms/switch.less, line 1

Toggle

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>forms.toggle-</insert-markup>
Markup 
<div class="odyssey-toggle-with-label">
	<label class="odyssey-toggle">
  		<input id="toggle-checkbox" type="checkbox">
  		<span class="slider  round"></span>
	</label>
  	<label for="toggle-checkbox" class="odyssey-toggle-with-label-text">Label text</label>
</div>
Source: src/forms/toggle.less, line 1