Overview
HTML
<div class="on-frame" style="margin:0;background:var(--oc-semantic-color-background-frame, #f0f0f0);display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:8px">
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:48px 8px;display:flex;justify-content:center;align-items:center;min-height:9rem"><oc-chip-v3 size="200"><input type="checkbox" aria-label="oc-auto"><label slot="content">Label</label></oc-chip-v3></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:48px 8px;display:flex;justify-content:center;align-items:center;min-height:9rem"><span style="position:relative;display:inline-flex;"><oc-chip-v3 size="200" style="--oc-semantic-color-background-stacked: var(--oc-component-chip-default-background-color-hover)"><input type="checkbox" aria-label="oc-auto"><label slot="content">Label</label></oc-chip-v3><span aria-hidden="true" style="position:absolute;left:30%;top:55%;pointer-events:none;line-height:0"><svg width="22" height="26" viewBox="0 0 22 26" fill="#fff" stroke="#f06" stroke-width="1.6" stroke-linejoin="round"><path d="M7 13V3.2a1.7 1.7 0 0 1 3.4 0V11l.2-2.3a1.6 1.6 0 0 1 3.2.2v2.4l.2-1.5a1.6 1.6 0 0 1 3.1.4v1.8l.3-.9a1.5 1.5 0 0 1 2.9.6v4.8c0 4.3-2.8 7.7-7 7.7h-1.2c-2.4 0-4-1-5.3-2.8L2 16.4a1.7 1.7 0 0 1 2.6-2.1Z"/><path d="M10.4 11v2.6M13.8 11.3v2.3M17.1 12.1v1.9" fill="none"/></svg></span></span></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:48px 8px;display:flex;justify-content:center;align-items:center;min-height:9rem"><span style="position:relative;display:inline-flex;"><oc-chip-v3 size="200" style="--oc-semantic-color-background-stacked: var(--oc-component-chip-default-background-color-active)"><input type="checkbox" aria-label="oc-auto"><label slot="content">Label</label></oc-chip-v3><span aria-hidden="true" style="position:absolute;left:20%;top:55%;pointer-events:none;line-height:0"><svg width="14" height="10" viewBox="0 0 14 10" aria-hidden="true" style="position:absolute;left:-2px;top:-10px" fill="none" stroke="#f06" stroke-width="1.5" stroke-linecap="round"><path d="M7 1v3M2 3l2 2M12 3l-2 2"/></svg><svg width="22" height="26" viewBox="0 0 22 26" fill="#fff" stroke="#f06" stroke-width="1.6" stroke-linejoin="round"><path d="M7 13V3.2a1.7 1.7 0 0 1 3.4 0V11l.2-2.3a1.6 1.6 0 0 1 3.2.2v2.4l.2-1.5a1.6 1.6 0 0 1 3.1.4v1.8l.3-.9a1.5 1.5 0 0 1 2.9.6v4.8c0 4.3-2.8 7.7-7 7.7h-1.2c-2.4 0-4-1-5.3-2.8L2 16.4a1.7 1.7 0 0 1 2.6-2.1Z"/><path d="M10.4 11v2.6M13.8 11.3v2.3M17.1 12.1v1.9" fill="none"/></svg></span></span></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:48px 8px;display:flex;justify-content:center;align-items:center;min-height:9rem"><span style="position:relative;display:inline-flex;outline:2px solid var(--oc-semantic-focus-outline-color);outline-offset:2px;border-radius:999px"><oc-chip-v3 size="200"><input type="checkbox" aria-label="oc-auto"><label slot="content">Label</label></oc-chip-v3></span></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:48px 8px;display:flex;justify-content:center;align-items:center;min-height:9rem"><oc-chip-v3 size="200"><input type="checkbox" checked aria-label="oc-auto"><label slot="content">Label</label></oc-chip-v3></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:48px 8px;display:flex;justify-content:center;align-items:center;min-height:9rem"><oc-chip-v3 size="200"><input type="checkbox" disabled aria-label="oc-auto"><label slot="content">Label</label></oc-chip-v3></div>
Default
Default shows the initial state when no interaction happened yet. It has the default styling of the component.
HTML
<div class="on-frame" style="margin:0;background:var(--oc-semantic-color-background-frame, #f0f0f0);display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:8px">
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:48px 8px;display:flex;justify-content:center;align-items:center;min-height:9rem"><oc-chip-v3 size="200"><input type="checkbox" aria-label="oc-auto"><label slot="content">Label</label></oc-chip-v3></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:48px 8px;display:flex;justify-content:center;align-items:center;min-height:9rem"><oc-checkbox-v2 width-behavior="fit"><input type="checkbox" aria-label="oc-auto"><label slot="label">Label</label></oc-checkbox-v2></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:48px 8px;display:flex;justify-content:center;align-items:center;min-height:9rem"><oc-switch-v3 width-behavior="fit"><input type="checkbox" aria-label="oc-auto"><label slot="label">Label</label></oc-switch-v3></div>
Hover
The Hover state is only shown when the user is hovering with a pointer device over a component. The state indicates that the component is interactive. It is not used on touch devices. There can only be one hover state at a time. Hover can be combined with a checked state.
The hover state has a lower emphasis than the active state and is for example designed slightly darker than the default styling.
Label
HTML
<div class="on-frame" style="margin:0;background:var(--oc-semantic-color-background-frame, #f0f0f0);display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:8px">
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:48px 8px;display:flex;justify-content:center;align-items:center;min-height:9rem"><span style="position:relative;display:inline-flex;"><oc-chip-v3 size="200" style="--oc-semantic-color-background-stacked: var(--oc-component-chip-default-background-color-hover)"><input type="checkbox" aria-label="oc-auto"><label slot="content">Label</label></oc-chip-v3><span aria-hidden="true" style="position:absolute;left:20%;top:50%;pointer-events:none;line-height:0"><svg width="22" height="26" viewBox="0 0 22 26" fill="#fff" stroke="#f06" stroke-width="1.6" stroke-linejoin="round"><path d="M7 13V3.2a1.7 1.7 0 0 1 3.4 0V11l.2-2.3a1.6 1.6 0 0 1 3.2.2v2.4l.2-1.5a1.6 1.6 0 0 1 3.1.4v1.8l.3-.9a1.5 1.5 0 0 1 2.9.6v4.8c0 4.3-2.8 7.7-7 7.7h-1.2c-2.4 0-4-1-5.3-2.8L2 16.4a1.7 1.7 0 0 1 2.6-2.1Z"/><path d="M10.4 11v2.6M13.8 11.3v2.3M17.1 12.1v1.9" fill="none"/></svg></span></span></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:48px 8px;display:flex;justify-content:center;align-items:center;min-height:9rem"><span style="position:relative;display:inline-flex;"><span style="display:inline-flex;align-items:center;gap:12px;font-size:1rem;line-height:1.5rem;color:var(--oc-semantic-color-text-default)"><span style="width:24px;height:24px;box-sizing:border-box;border-radius:4px;box-shadow:0 0 0 2px var(--oc-component-form-default-border-color);background:var(--oc-semantic-color-background-canvas)"></span>Label</span><span aria-hidden="true" style="position:absolute;left:10px;top:40%;pointer-events:none;line-height:0"><svg width="22" height="26" viewBox="0 0 22 26" fill="#fff" stroke="#f06" stroke-width="1.6" stroke-linejoin="round"><path d="M7 13V3.2a1.7 1.7 0 0 1 3.4 0V11l.2-2.3a1.6 1.6 0 0 1 3.2.2v2.4l.2-1.5a1.6 1.6 0 0 1 3.1.4v1.8l.3-.9a1.5 1.5 0 0 1 2.9.6v4.8c0 4.3-2.8 7.7-7 7.7h-1.2c-2.4 0-4-1-5.3-2.8L2 16.4a1.7 1.7 0 0 1 2.6-2.1Z"/><path d="M10.4 11v2.6M13.8 11.3v2.3M17.1 12.1v1.9" fill="none"/></svg></span></span></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:48px 8px;display:flex;justify-content:center;align-items:center;min-height:9rem"><span style="position:relative;display:inline-flex;"><oc-switch-v3 width-behavior="fit" style="--oc-component-switch-default-background-color: var(--oc-base-color-gray-400)"><input type="checkbox" aria-label="oc-auto"><label slot="label">Label</label></oc-switch-v3><span aria-hidden="true" style="position:absolute;left:10px;top:40%;pointer-events:none;line-height:0"><svg width="22" height="26" viewBox="0 0 22 26" fill="#fff" stroke="#f06" stroke-width="1.6" stroke-linejoin="round"><path d="M7 13V3.2a1.7 1.7 0 0 1 3.4 0V11l.2-2.3a1.6 1.6 0 0 1 3.2.2v2.4l.2-1.5a1.6 1.6 0 0 1 3.1.4v1.8l.3-.9a1.5 1.5 0 0 1 2.9.6v4.8c0 4.3-2.8 7.7-7 7.7h-1.2c-2.4 0-4-1-5.3-2.8L2 16.4a1.7 1.7 0 0 1 2.6-2.1Z"/><path d="M10.4 11v2.6M13.8 11.3v2.3M17.1 12.1v1.9" fill="none"/></svg></span></span></div>
Active (Pressed)
The Active (Pressed) state is shown while the user clicks or taps on a component. There can only be one active state at a time.
The Active state has a higher emphasis than the hover state and is for example designed with a darker color or a darker overlay.
Label
HTML
<div class="on-frame" style="margin:0;background:var(--oc-semantic-color-background-frame, #f0f0f0);display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:8px">
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:48px 8px;display:flex;justify-content:center;align-items:center;min-height:9rem"><span style="position:relative;display:inline-flex;"><oc-chip-v3 size="200" style="--oc-semantic-color-background-stacked: var(--oc-component-chip-default-background-color-active)"><input type="checkbox" aria-label="oc-auto"><label slot="content">Label</label></oc-chip-v3><span aria-hidden="true" style="position:absolute;left:20%;top:50%;pointer-events:none;line-height:0"><svg width="14" height="10" viewBox="0 0 14 10" aria-hidden="true" style="position:absolute;left:-2px;top:-10px" fill="none" stroke="#f06" stroke-width="1.5" stroke-linecap="round"><path d="M7 1v3M2 3l2 2M12 3l-2 2"/></svg><svg width="22" height="26" viewBox="0 0 22 26" fill="#fff" stroke="#f06" stroke-width="1.6" stroke-linejoin="round"><path d="M7 13V3.2a1.7 1.7 0 0 1 3.4 0V11l.2-2.3a1.6 1.6 0 0 1 3.2.2v2.4l.2-1.5a1.6 1.6 0 0 1 3.1.4v1.8l.3-.9a1.5 1.5 0 0 1 2.9.6v4.8c0 4.3-2.8 7.7-7 7.7h-1.2c-2.4 0-4-1-5.3-2.8L2 16.4a1.7 1.7 0 0 1 2.6-2.1Z"/><path d="M10.4 11v2.6M13.8 11.3v2.3M17.1 12.1v1.9" fill="none"/></svg></span></span></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:48px 8px;display:flex;justify-content:center;align-items:center;min-height:9rem"><span style="position:relative;display:inline-flex;"><span style="display:inline-flex;align-items:center;gap:12px;font-size:1rem;line-height:1.5rem;color:var(--oc-semantic-color-text-default)"><span style="width:24px;height:24px;box-sizing:border-box;border-radius:4px;box-shadow:0 0 0 2px var(--oc-base-color-black-lighten-30);background:var(--oc-semantic-color-background-canvas)"></span>Label</span><span aria-hidden="true" style="position:absolute;left:10px;top:40%;pointer-events:none;line-height:0"><svg width="14" height="10" viewBox="0 0 14 10" aria-hidden="true" style="position:absolute;left:-2px;top:-10px" fill="none" stroke="#f06" stroke-width="1.5" stroke-linecap="round"><path d="M7 1v3M2 3l2 2M12 3l-2 2"/></svg><svg width="22" height="26" viewBox="0 0 22 26" fill="#fff" stroke="#f06" stroke-width="1.6" stroke-linejoin="round"><path d="M7 13V3.2a1.7 1.7 0 0 1 3.4 0V11l.2-2.3a1.6 1.6 0 0 1 3.2.2v2.4l.2-1.5a1.6 1.6 0 0 1 3.1.4v1.8l.3-.9a1.5 1.5 0 0 1 2.9.6v4.8c0 4.3-2.8 7.7-7 7.7h-1.2c-2.4 0-4-1-5.3-2.8L2 16.4a1.7 1.7 0 0 1 2.6-2.1Z"/><path d="M10.4 11v2.6M13.8 11.3v2.3M17.1 12.1v1.9" fill="none"/></svg></span></span></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:48px 8px;display:flex;justify-content:center;align-items:center;min-height:9rem"><span style="position:relative;display:inline-flex;"><oc-switch-v3 width-behavior="fit" style="--oc-component-switch-default-background-color: var(--oc-component-switch-default-background-color-active)"><input type="checkbox" aria-label="oc-auto"><label slot="label">Label</label></oc-switch-v3><span aria-hidden="true" style="position:absolute;left:10px;top:40%;pointer-events:none;line-height:0"><svg width="14" height="10" viewBox="0 0 14 10" aria-hidden="true" style="position:absolute;left:-2px;top:-10px" fill="none" stroke="#f06" stroke-width="1.5" stroke-linecap="round"><path d="M7 1v3M2 3l2 2M12 3l-2 2"/></svg><svg width="22" height="26" viewBox="0 0 22 26" fill="#fff" stroke="#f06" stroke-width="1.6" stroke-linejoin="round"><path d="M7 13V3.2a1.7 1.7 0 0 1 3.4 0V11l.2-2.3a1.6 1.6 0 0 1 3.2.2v2.4l.2-1.5a1.6 1.6 0 0 1 3.1.4v1.8l.3-.9a1.5 1.5 0 0 1 2.9.6v4.8c0 4.3-2.8 7.7-7 7.7h-1.2c-2.4 0-4-1-5.3-2.8L2 16.4a1.7 1.7 0 0 1 2.6-2.1Z"/><path d="M10.4 11v2.6M13.8 11.3v2.3M17.1 12.1v1.9" fill="none"/></svg></span></span></div>
Checked
The checked state can be shown when the component has been checked by clicking or taping on it. By checking a component, a user is not directed to a different page. It is used for input which can change the content of a page, for example when a user filters. The checked state has a hover and active state.
The checked state is only used in the following components:
- Card
- Checkbox
- Chip
- Media Object Card
- Pagination Dots
- Promo Card
- Radio Button
- Selection Tile
- Switch
- Row
- Tab bar
HTML
<div class="on-frame" style="margin:0;background:var(--oc-semantic-color-background-frame, #f0f0f0);display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:8px">
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:48px 8px;display:flex;justify-content:center;align-items:center;min-height:9rem"><oc-chip-v3 size="200"><input type="checkbox" checked aria-label="oc-auto"><label slot="content">Label</label></oc-chip-v3></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:48px 8px;display:flex;justify-content:center;align-items:center;min-height:9rem"><oc-checkbox-v2 width-behavior="fit"><input type="checkbox" checked aria-label="oc-auto"><label slot="label">Label</label></oc-checkbox-v2></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:48px 8px;display:flex;justify-content:center;align-items:center;min-height:9rem"><oc-switch-v3 width-behavior="fit"><input type="checkbox" checked aria-label="oc-auto"><label slot="label">Label</label></oc-switch-v3></div>
For further information on states, refer to the technical documentation.
Focused
The focused state is initiated when a user has navigated to a component by using the tab key on his keyboard or by using assistive technology. There can only be one focused state at a time.
It is designed with an outline having two pixel offset to the component. So that the state is distinct enough that the user can easily identify it. The border radius depends on the component. The focused state looks similar in every component.
All OTTO components have an inbuilt floating focused state, to be visible even if used within a container with overflow:hidden.
HTML
<div class="on-frame" style="margin:0;background:var(--oc-semantic-color-background-frame, #f0f0f0);display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:8px">
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:48px 8px;display:flex;justify-content:center;align-items:center;min-height:9rem"><span style="position:relative;display:inline-flex;outline:2px solid var(--oc-semantic-focus-outline-color);outline-offset:2px;border-radius:999px"><oc-chip-v3 size="200"><input type="checkbox" aria-label="oc-auto"><label slot="content">Label</label></oc-chip-v3></span></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:48px 8px;display:flex;justify-content:center;align-items:center;min-height:9rem"><span style="position:relative;display:inline-flex;"><span style="position:absolute;left:0;top:0;width:24px;height:24px;outline:2px solid var(--oc-semantic-focus-outline-color);outline-offset:2px;border-radius:6px"></span><oc-checkbox-v2 width-behavior="fit"><input type="checkbox" aria-label="oc-auto"><label slot="label">Label</label></oc-checkbox-v2></span></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:48px 8px;display:flex;justify-content:center;align-items:center;min-height:9rem"><oc-switch-v3 width-behavior="fit"><input type="checkbox" aria-label="oc-auto"><label slot="label">Label</label></oc-switch-v3></div>
Disabled
The disabled state is used when a component is not interactive. A disabled component does not change its state when the user interacts with it. You can have multiple disabled states on a page. However, you should carefully consider whether you want to use disabled components or whether you just hide them or show an error.
It is designed by using different grey tones to ensure low emphasis. Disabled states do not need to meet contrast requirements regarding accessibility.
HTML
<div class="on-frame" style="margin:0;background:var(--oc-semantic-color-background-frame, #f0f0f0);display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:8px">
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:48px 8px;display:flex;justify-content:center;align-items:center;min-height:9rem"><oc-chip-v3 size="200"><input type="checkbox" disabled aria-label="oc-auto"><label slot="content">Label</label></oc-chip-v3></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:48px 8px;display:flex;justify-content:center;align-items:center;min-height:9rem"><oc-checkbox-v2 width-behavior="fit"><input type="checkbox" disabled aria-label="oc-auto"><label slot="label">Label</label></oc-checkbox-v2></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:48px 8px;display:flex;justify-content:center;align-items:center;min-height:9rem"><oc-switch-v3 width-behavior="fit"><input type="checkbox" disabled aria-label="oc-auto"><label slot="label">Label</label></oc-switch-v3></div>
Fragments
You can find an overview of all the focus outline token here and for the disabled token here.