Data

Sort Control

semantic HTML

정렬 기준과 방향을 선택합니다.

stablefreeSince 0.1

Live example

Sort bySorted by name

<label for="example-sort">Sort by</label><select id="example-sort" data-example-action="sort"><option value="name">Name</option><option value="newest">Newest</option><option value="status">Status</option></select><output data-example-output aria-live="polite">Sorted by name</output>

Variants and sizes

The pattern inherits theme and density tokens. Use compact, comfortable, or roomy density when the surrounding screen requires it.

compactcomfortableroomy

Public API

Contract	Value
Implementation	`semantic HTML`
Status	`stable`
License	`free`
Since	`0.1`
HTML contract	`Native HTML elements and attributes`
Events	`Native browser events`

Accessibility

Native HTML semantics and keyboard behavior are the baseline.

Server template guidance

<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->