Tabs Component

[NeilBrommer]

I've created a tabs component that may be useful:

There's a CodePen with a working example.

This doesn't require any JavaScript. This instead uses radio buttons to track the active tab and CSS based on the checkbox state to show/hide tab contents.

---

The HTML structure:

<div class="asis-tabs" role=tablist>
	<input type="radio" id="tab1" name="tab-selection" checked />
	<label for="tab1" class="asis-tab-label" role="tab">Tab 1</label>
	<div class="asis-tab-content" role="tabpanel">
		<p>Tab 1 contents</p>
	</div>

	<input type="radio" id="tab2" name="tab-selection" />
	<label for="tab2" class="asis-tab-label" role="tab">Tab 2</label>
	<div class="asis-tab-content" role="tabpanel">
		<p>Tab 2 contents</p>
		<p>Add some extra height</p>
	</div>

	<input type="radio" id="tab3" name="tab-selection" />
	<label for="tab3" class="asis-tab-label" role="tab">Tab 3</label>
	<div class="asis-tab-content" role="tabpanel">
		<p>Tab 3 contents</p>
	</div>
</div>

And the SCSS:

.asis-tabs {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 2rem;
	// Match the cards border
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
	border-radius: 4px;

	&:has(> input:focus-visible) {
		.asis-tab-label {
			outline: 1px solid gray;
		}
	}

	> input[type="radio"] {
		// These need to be present for keyboard accessibility
		// So display: none; isn't an option here

		opacity: 0;
		width: 0;
		margin: 0;
		appearance: none;
	}

	> input[type="radio"] + .asis-tab-label {
		order: 0;
		width: unset;
		flex-grow: 1;
		padding: 25px;
		margin: 0;
		font-size: 1.3rem;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		display: flex;
		justify-content: center;
		transition: background-color 100ms ease-in-out;
		border-bottom: 4px solid transparent;

		.wsu-icon {
			line-height: unset;
		}
	}

	> input:checked + .asis-tab-label {
		background-color: #ebebeb;
		border-bottom-color: #a60f2d;
	}

	> input:not(:checked) + .asis-tab-label:hover {
		background-color: #f5f5f5;
	}

	.asis-tab-content {
		flex: 100%;
		order: 1;
		display: none;
		border-top: 1px solid #e5e5e5;
		padding-top: 1.5em;
		padding-left: 1rem;
		padding-right: 1rem;
	}

	> input:checked + .asis-tab-label + .asis-tab-content {
		display: block;
	}
}