Blockquote

"I will cast the dark shadows of human life over you without reserve. But you must not be afraid."

Soseki Natsume. 1914. Kokoro. Iwanami Shoten, Tokyo, Japan. Translated by Andyou, 2026.

Input style

input[type="text"] input[type="file"] input[type="email"] required input[type="password"] input[type="url"] input[type="tel"] select label > select[data-facet="chevron"] textarea

size

input[type="text"] input[type="email"], aria-invalid="true" input[type="url"], disabled select label > select[data-facet="chevron"] texarea

:required - label > span:first-child, fieldset > legend > span

input[type="checkbox"], required

fieldset:has(:required) > legend choice A choice B

Surround style, underline style

a (data-style="underline")

summary (data-style="underline")

details > summary, p

a data-surround="outline"

summary (data-surround="outline")

details > summary, p

size

xs sm (md) lg xl 2xl, aria-disabled="true"

Sign

data-inline-align

p[data-sign="rule"][data-inline-align="end"]

Popup

Checkbox

label > (span, label > input[type="checkbox"]) checked data-indeterminate checked aria-invalid="true" disabled checked disabled

size

xs sm (md) lg xl 2xl

Radio

label > (span, input[type="radio"]) label > (span, input[type="radio"]) checked

:user-invalid, [aria-invalid="true"] inline inline

:disabled, [aria-disabled="true"] inline inline

size

size xs sm (md) lg xl 2xl

fieldset[data-group="inline"]

Icon badge none active information

label[data-size="sm"] (none) checked disabled aria-invalid

label[data-size="lg"] (none) checked

label[data-surround="fill"] (none) checked disabled aria-invalid

radiogroup

repeat(3, max-content) Light (less contrast) Light Light (more contrast) Dark (less contrast) Dark Dark (more contrast)

repeat(3, 10rem) Light (less contrast) Light Light (more contrast) Dark (less contrast) Dark Dark (more contrast)

axis=inline, max-content repeat(3, max-content) Light (less contrast) Light Light (more contrast) Dark (less contrast) Dark Dark (more contrast)

axis=inline, max-content repeat(3, 10rem) Light (less contrast) Light Light (more contrast) Dark (less contrast) Dark Dark (more contrast)

Tab

span span

tabpanel-1

tabpanel-2

Toggle

data-axis="inline" data-axis="block", data-type="knob-only"

size

xs sm (md) lg xl disabled 2xl checked disabled

Step - button, input[role="spinbutton"]

size

[data-surround="outline"]

:user-invalid, [aria-invalid="true"]

:disabled, [aria-disabled="true"]

Slider

label > (span, input[type="range"])

xs sm (md) lg xl aria-invalid="true" 2xl disabled

Search

search > (span, label > input, button) search > (span, label > select, label > input, button)

size

xs sm md lg xl 2xl

Heading

h1

h2

h3

h4

h5

h6

hgroup[data-axis="block"] > (h1, p)

hgroup[data-axis="inline"] > (h1, p)

Subtitle

hN x p size matrix (baseline alignment, no per-size correction)

h1 2xl

p (none = md)

h1 2xl

p md

h1 xl

p xs

h1 lg

p md

h1 md

p sm

h1 xs

p 2xl

multi-line p (pre-wrap)

h1 lg

line1　 line2

Error summary & detail

section[data-type="error-summary"] > (h2, p, ul > li)

There is a problem

次の項目を修正してから、もう一度送信してください。

Enter your full name
Date of birth must be a real date

p[data-type="error"][data-size]

氏名 (xs)

エラー: 氏名を入力してください

氏名 (sm)

エラー: 氏名を入力してください

氏名 (md)

エラー: 氏名を入力してください

氏名 (lg)

エラー: 氏名を入力してください

氏名 (xl)

エラー: 氏名を入力してください

氏名 (2xl)

エラー: 氏名を入力してください

Table

(data-border="sectioned")
Head	Head	Head
Row	Cell	Cell
Row	Cell	Cell
Row	Cell	Cell

data-border="grid" data-selectable
	Head	Head
	Cell	Cell
	Cell	Cell

data-border="booktabs" data-stripe
Head	Head	Head
Row	Cell	Cell
Row	Cell	Cell
Row	Cell	Cell

Sort buttons
Head	Head	Head
Row	Cell	Cell
Row	Cell	Cell

size

data-size="xs"
Head	Head	Head
Row	Cell	Cell
Row	Cell	Cell
Row	Cell	Cell

data-size="sm"
Head	Head	Head
Row	Cell	Cell
Row	Cell	Cell
Row	Cell	Cell

data-size="lg"
Head	Head	Head
Row	Cell	Cell
Row	Cell	Cell
Row	Cell	Cell

data-size="xl"
Head	Head	Head
Row	Cell	Cell
Row	Cell	Cell
Row	Cell	Cell

data-size="2xl"
Head	Head	Head
Row	Cell	Cell
Row	Cell	Cell
Row	Cell	Cell

Blockquote

Input style

size

:required - label > span:first-child, fieldset > legend > span

Surround style, underline style

size

Sign

data-inline-align

Popup

Checkbox

size

Radio

size

fieldset[data-group="inline"]

radiogroup

Tab

Toggle

size

Step - button, input[role="spinbutton"]

size

[data-surround="outline"]

:user-invalid, [aria-invalid="true"]

:disabled, [aria-disabled="true"]

Slider

label > (span, input[type="range"])

Search

size

Heading

h1

h2

h3

h4

h5

h6

hgroup[data-axis="block"] > (h1, p)

hgroup[data-axis="inline"] > (h1, p)

hN x p size matrix (baseline alignment, no per-size correction)

h1 2xl

h1 2xl

h1 xl

h1 lg

h1 md

h1 xs

multi-line p (pre-wrap)

h1 lg

Error summary & detail

section[data-type="error-summary"] > (h2, p, ul > li)

There is a problem

p[data-type="error"][data-size]

Table

size

Toast