Until Selected

Hide or disable content until at least one checkbox or radio button is selected.

Note. A future update will also add support for <select> menu selections.

Usage

Wrap your content in a <kelp-until-selected> element, and add a [target] attribute whose value is the selector string for the fields that should control its visibility.

<label for="show-content">
	<input type="checkbox" id="show-content">
	Show the content
</label>

<kelp-until-selected target="#show-content">
	<div class="callout">
		I'm hidden unless a checkbox is checked.
	</div>
</kelp-until-selected>

Actions

By default, content is hidden with the [hidden] attribute. You can adjust how the <kelp-until-selected> controls the content using the [action] attribute.

Invisible

If you add an [action] attribute with a value of invisible, content will be styled with visbility: hidden. It will occupy space in the DOM without being visually displayed.

<label for="show-content">
	<input type="checkbox" id="show-content">
	Show the content
</label>

<kelp-until-selected target="#show-content" action="invisible">
	<div class="callout">
		I'm hidden unless a checkbox is checked.
	</div>
</kelp-until-selected>

Disabled

If you add an [action] attribute with a value of disabled, content will still be visible, but field and <button> elements will be [disabled].

<label for="show-content">
	<input type="checkbox" id="show-content">
	Show the content
</label>

<kelp-until-selected target="#show-content" action="disabled">
	<div class="callout outline">
		<label for="wizard">Pick a Wizard</label>
		<select id="wizard">
			<option></option>
			<option>Merlin</option>
			<option>Gandalf</option>
			<option>Radagast</option>
		</select>

		<label for="checkbox">
			<input type="checkbox">
			Check me
		</label>

		<label for="username">Username</label>
		<input type="text" id="username">

		<button>Submit</button>
	</div>
</kelp-until-selected>

Fields

Content visibility can be controlled by checkboxes and radio buttons. You can require a specific field to be selected, or show content when one of many is checked.

Checkboxes

The [target] attribute accepts any valid CSS selector string, and will check all matching elements in the UI when calculating if the content should be shown or hidden.

If at least one matching item is selected, the content will be visible.

<fieldset>
	<legend>What's your favorite Pixar movie?</legend>
	<div id="pixar-movies">
		<label for="up">
			<input type="checkbox" id="up" name="movie" value="up">
			Up!
		</label>
		<label for="wall-e">
			<input type="checkbox" id="wall-e" name="movie" value="wall-e">
			WALL-E
		</label>
		<label for="toy-story">
			<input type="checkbox" id="toy-story" name="movie" value="toy-story">
			Toy Story
		</label>
	</div>
</fieldset>

<kelp-until-selected target="#pixar-movies [type='checkbox']">
	<div class="callout">
		I'm hidden unless a checkbox is checked.
	</div>
</kelp-until-selected>

Radio Buttons

By playing with the selector string you pass into the [target] attribute, you can show content when one of several radio buttons are selected, or when a specific radio button is checked.

Here, the content is only display when #up is selected.

<fieldset>
	<legend>What's your favorite Pixar movie?</legend>
	<div id="pixar-movies">
		<label for="up">
			<input type="radio" id="up" name="movie" value="up">
			Up!
		</label>
		<label for="wall-e">
			<input type="radio" id="wall-e" name="movie" value="wall-e">
			WALL-E
		</label>
		<label for="toy-story">
			<input type="radio" id="toy-story" name="movie" value="toy-story">
			Toy Story
		</label>
	</div>
</fieldset>

<kelp-until-selected target="#up">
	<div class="callout">
		I'm hidden unless Up! is selected.
	</div>
</kelp-until-selected>

Show by Default

If a controlling field is selected when the component loads, its content will be visible by default.

<label for="show-content">
	<input type="checkbox" id="show-content" checked>
	Show the content
</label>

<kelp-until-selected target="#show-content">
	<div class="callout">
		I'm hidden unless a checkbox is checked.
	</div>
</kelp-until-selected>

Focus

When content is hidden, if an item within the <kelp-until-selected> component has :focus, it will lose it. This can create a confusing experience for people who navigate with a keyboard and or use a screen reader.

The [focus] attribute allows you to specific the selector for an element that should receive focus in this situations.

<kelp-until-selected target="#show-content" focus="#show-content">
	<label for="username">Username</label>
	<input type="text" id="username">
</kelp-until-selected>

Options

Use custom attributes to configure component settings.

• [target] - A CSS selector string for the fields that control the content state.
• [action] - Whether content should be hidden, invisible, or disabled until a target field is selected (default: hidden).
• [focus] - A selector for the element to shift :focus to if its currently on an item inside the component when it becomes hidden or disabled.
• [events] - A comma-separated list of events that should also trigger a visibility check.
• [keys] - A comma-separated list of event keys to filter by.

Events

The <kelp-until-selected> element emits a few events.

• kelp-until-selected:ready emits when the component is instantiated.
• kelp-until-selected:toggle emits after the content state is updated.

The event.detail property for the kelp-until-selected:toggle event includes the isEnabled state, with a value of true when the content is visible or enabled, and false when its hidden or disabled.

document.addEventListener('kelp-until-selected:ready', (event) => {
	console.log('ready:', event.target);
});

document.addEventListener('kelp-until-selected:toggle', (event) => {
	console.log(`The content is ${event.detail.isEnabled ? 'visible/enabled' : 'hidden/disabled'}`);
});

Methods

While web components are self-instantiating, the <kelp-until-selected> element has a few methods you can manually run if needed.

• .toggle() - Manually trigger a visibility check. Pass in a value of true to force content to be enabled.
• .init() - Manually initialize the component, if it fails for some reason.

const untilSelected = document.querySelector('kelp-until-selected');

// Toggle visibility based on the controlling fields state
untilSelected.toggle();

// Force content to be visible or enabled
untilSelected.toggle(true);