Dropdown

Source

Contributors

Overview
Theming

Base

Example of the dropdown variant of the text input component, which requires a few extra elements present.

Do you understand?

<div class='c-input'>
	<label class='c-input__label' for='dropdown-field'>Do you understand?</label>
	<div class='c-input__wrapper'>
		<select id='dropdown-field' name='dropdown' class='c-input__field' />
			<option value='yes'>Yes</option>
			<option value='no'>No</option>
			<option value='i-dont-know'>I don't know</option>
			<option value='repeat'>Could you repeat the question?</option>
		</select>
		<svg class='c-input__arrow'><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#arrow" /></svg>
	</div>
</div>

You can theme the dropdown component to make it fit your brand. For more information on theming EvoToolkit, please see Configuring EvoToolkit.

Below is a list of theme variables and their default values.

Theme Variables

Theme Variables	Default
`$component-input-focus-color`	`primary`
`$component-input-border-color`	`light`
`$component-input-disabled-background-color`	`very-light`
`$component-input-box-color`	`very-light`
`$component-input-disabled-text-color`	`light`
`$component-input-calendar-box-border-color`	`primary`