Account Settings

Account settings composed from tabs, forms, switches, selects, a range slider, confirmation modals and utility classes.

Settings workspace

Use tabs to group related settings without changing the meaning of the forms inside them. Each form has its own submission endpoint, and destructive actions require a separate confirmation step.

Profile details

Update the information shown across your workspace.

<div class="tab-container shadow-sm rounded">
<div class="tabs" role="tablist" aria-label="Account settings sections">
	<button
		class="tab is-active"
		id="account-profile-tab"
		type="button"
		role="tab"
		aria-selected="true"
		aria-controls="account-profile">
		Profile
	</button>
	<button
		class="tab"
		id="account-notifications-tab"
		type="button"
		role="tab"
		aria-selected="false"
		aria-controls="account-notifications"
		tabindex="-1">
		Notifications
	</button>
	<button
		class="tab"
		id="account-security-tab"
		type="button"
		role="tab"
		aria-selected="false"
		aria-controls="account-security"
		tabindex="-1">
		Security
	</button>
</div>

<div class="tab-contents">
	<div
		class="tab-content is-active"
		id="account-profile"
		role="tabpanel"
		aria-labelledby="account-profile-tab">
		<form action="/account/profile" method="post">
			<!-- Labelled inputs and selects -->
			<button class="btn btn-solid btn-primary" type="submit">Save profile</button>
		</form>
	</div>

	<div
		class="tab-content"
		id="account-notifications"
		role="tabpanel"
		aria-labelledby="account-notifications-tab"
		hidden>
		<form action="/account/notifications" method="post">
			<fieldset class="border border-0 min-w-0 p-0 m-0">
				<legend>Notification channels</legend>
				<div class="form-switch">
					<input
						class="form-switch-input"
						id="accountChannelEmail"
						name="channels"
						type="checkbox"
						value="email" />
					<label class="form-label" for="accountChannelEmail"
						>Email notifications</label
					>
				</div>
			</fieldset>

			<label class="form-label" for="accountDigestFrequency">Digest frequency</label>
			<select class="form-select" id="accountDigestFrequency" name="digestFrequency">
				<option value="daily">Daily</option>
				<option value="weekly">Weekly</option>
			</select>

			<div class="range-slider" data-range-slider data-range-slider-unit=" items">
				<div class="range-slider-header">
					<label class="form-label" for="accountDigestLimit">Maximum items per digest</label>
					<output class="range-slider-output" for="accountDigestLimit" data-range-slider-output>8 items</output>
				</div>
				<input class="range-slider-input" id="accountDigestLimit" name="digestLimit" type="range" min="1" max="20" value="8" style="--range-slider-progress: 36.84%" data-range-slider-input />
				<div class="range-slider-marks" aria-hidden="true"><span>1</span><span>20</span></div>
			</div>
			<button class="btn btn-solid btn-primary" type="submit">Save notifications</button>
		</form>
	</div>

	<div
		class="tab-content"
		id="account-security"
		role="tabpanel"
		aria-labelledby="account-security-tab"
		hidden>
		<button
			class="btn btn-outline btn-error"
			type="button"
			data-modal-target="#deleteAccountModal">
			Delete account
		</button>
	</div>
</div>
</div>

<dialog
class="modal modal-sm"
id="deleteAccountModal"
aria-labelledby="deleteAccountModalTitle"
aria-describedby="deleteAccountModalDescription">
<div class="modal-content">
	<div class="modal-header">
		<h3 class="modal-title" id="deleteAccountModalTitle">Delete account?</h3>
	</div>
	<div class="modal-body">
		<p id="deleteAccountModalDescription">This action cannot be undone.</p>
	</div>
	<div class="modal-footer">
		<button class="btn btn-text btn-secondary" type="button" data-modal-close>
			Cancel
		</button>
		<button class="btn btn-solid btn-error" type="button" data-modal-close>
			Delete account
		</button>
	</div>
</div>
</dialog>