Cycle Toggle

<cycle-toggle> Mature JS

Click to cycle through a variety of options

Features

Examples

Basic, no selected option:

<label for="mood">Mood:</label>
<cycle-toggle id="mood">
	<span>😔</span>
	<span>😕</span>
	<span>😐</span>
	<span>🙂</span>
	<span>😀</span>
</cycle-toggle>

Pre-selected option:

<label for="mood2">Mood:</label>
<cycle-toggle id="mood2">
	<span>😔</span>
	<span>😕</span>
	<span>😐</span>
	<span aria-selected="true">🙂</span>
	<span>😀</span>
</cycle-toggle>

With values (any child element works):

<label for="mood3">Mood:</label>
<cycle-toggle id="mood3">
	<data value="sad">😔</data>
	<data value="neutral">😐</data>
	<data value="happy" aria-selected="true">🙂</data>
	<data value="elated">😀</data>
</cycle-toggle>

With styles:

<cycle-toggle>
	<data value="" style="opacity: .4">👍🏼</data>
	<data value="1">👍🏼</data>
</cycle-toggle>

Readonly:

<cycle-toggle id="readonly_toggle" readonly>
	<span>😔</span>
	<span>😕</span>
	<span>😐</span>
	<span aria-selected="true">🙂</span>
	<span>😀</span>
</cycle-toggle>
<button onclick="readonly_toggle.readonly = !readonly_toggle.readonly">Toggle readonly</button>

Set element.value:

<cycle-toggle id="toggle_rate">
	<data value="1">👍🏼</data>
	<data value="-1">👎🏼</data>
</cycle-toggle>
<button onclick="toggle_rate.value = 1">Select 👍🏼</button>
<button onclick="toggle_rate.value = -1">Select 👎🏼</button>

Dynamic aria-selected:

<cycle-toggle id="dynamic_selected">
	<span>😔</span>
	<span>😕</span>
	<span>😐</span>
	<span>🙂</span>
	<span>😀</span>
</cycle-toggle>
<button onclick="dynamic_selected.children[3].setAttribute('aria-selected', 'true')">Select 🙂</button>

Installation

Just include the component’s JS file and you’re good:

<script src="https://nudeui.com/elements/cycle-toggle/cycle-toggle.js" type="module"></script>

In case you want to link to local files: CSS is fetched automatically, and assumed to be in the same directory as the JS file.