Side Tabs

Preview

If you are using individual js components, tabs.js file is required.

Simple Tabs These are regular tabs pointing each to its own content.

Metrics

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.

Radio Button Tabs These are simple tabs with radio inputs.

Default

If you are using individual js components, side-tabs.js file is required.

If DOM already initialized, make sure to call SUI.sideTabs( this ) function for each .sui-side-tabs label.sui-tab-item input element.

Radio Buttons Only

Input radio buttons styled as tab selectors with no content to show.

Documentation

Sample Markup

If you are using individual js components, tabs.js file is required. For more info go to tabs documentation.

<div class="sui-tabs sui-side-tabs">

	<div role="tablist" class="sui-tabs-menu">

		<!--
		NOTE(S):

		1. Include "type" attribute when using tabs inside a form to prevent
		problems when submitting the form.

		2. Include "aria-controls" attribute when using tabs with content.

		3. Unique IDs are a must for button tab and its content.
		-->

		<button
			type="button"
			role="tab"
			id="one__tab"
			class="sui-tab-item active"
			aria-controls="one__content"
			aria-selected="true">
			Tab 1
		</button>

		<button
			type="button"
			role="tab"
			id="two__tab"
			class="sui-tab-item"
			aria-controls="two__content"
			aria-selected="false"
			tabindex="-1">
			Tab 2
		</button>

	</div>

	<div class="sui-tabs-content">

		<div
			role="tabpanel"
			id="one__content"
			class="sui-tab-content active"
			aria-labelledby="one__tab"
			tabindex="0">

			<div class="sui-border-frame">
				<p>Tab 1</p>
			</div>

		</div>

		<div
			role="tabpanel"
			id="two__content"
			class="sui-tab-content"
			aria-labelledby="two__tab"
			tabindex="0"
			hidden>

			<div class="sui-border-frame">
				<p>Tab 2</p>
			</div>

		</div>

		<div
			role="tabpanel"
			id="sample-tab__three--content"
			class="sui-tab-content"
			aria-labelledby="sample-tab__three"
			tabindex="0"
			hidden>

			<div class="sui-border-frame">
				<p>Tab 3</p>
			</div>

		</div>

	</div>

</div>

If you are using individual js components, tabs.js file is required.

<div class="sui-tabs sui-side-tabs">

	<div role="tablist" class="sui-tabs-menu">

		<!--
		NOTE(S):

		1. Include "type" attribute when using tabs inside a form to prevent
		problems when submitting the form.

		2. Include "aria-controls" attribute when using tabs with content.

		3. Unique IDs are a must for button tab and its content.
		-->

		<button
			type="button"
			role="tab"
			id="one__tab"
			class="sui-tab-item active"
			aria-controls="one__content"
			aria-selected="true">
			Tab 1
		</button>
		<input
			type="radio"
			name="sample-tabs"
			value="one"
			class="sui-screen-reader-text"
			aria-label="Tab 1"
			aria-hidden="true"
			checked="checked" />

		<button
			type="button"
			role="tab"
			id="two__tab"
			class="sui-tab-item"
			aria-controls="two__content"
			aria-selected="false"
			tabindex="-1">
			Tab 2
		</button>
		<input
			type="radio"
			name="sample-tabs"
			value="two"
			class="sui-screen-reader-text"
			aria-label="Tab 2"
			aria-hidden="true" />

	</div>

	<div class="sui-tabs-content">

		<div role="tabpanel"
			id="one__content"
			class="sui-tab-content active"
			aria-labelledby="one__tab"
			tabindex="0">

			<div class="sui-border-frame">
				<p>Tab 1</p>
			</div>

		</div>

		<div role="tabpanel"
			id="two__content"
			class="sui-tab-content"
			aria-labelledby="two__tab"
			tabindex="0"
			hidden>

			<div class="sui-border-frame">
				<p>Tab 2</p>
			</div>

		</div>

	</div>

</div>

If you are using individual js components, side-tabs.js file is required.

If DOM already initialized, make sure to call SUI.sideTabs( this ) function for each .sui-side-tabs label.sui-tab-item input element.

<div class="sui-side-tabs">

	<div class="sui-tabs-menu">

		<label id="one__label" for="one__option" class="sui-tab-item active">
			<input
				type="radio"
				name="sample-tabs"
				value="one"
				id="one__option"
				checked="checked">
			Option 1
		</label>

		<label id="two__label" for="two__option" class="sui-tab-item">
			<input
				type="radio"
				name="sample-tabs"
				value="two"
				id="two__option">
			Option 2
		</label>

	</div>

</div>

Side Tabs

Preview

Metrics

Audits

Diagnostics

Default

Flat

Bold

Material

Radio Buttons Only

Documentation

Sample Markup