Data

Bulk Action Bar

semantic HTML

선택된 여러 항목에 적용할 작업을 표시합니다.

stablefreeSince 0.3

Live example

Ada Grace0 selected

<section class="ui-bulk-action-bar" aria-label="Bulk actions"><label><input type="checkbox" data-example-select> Ada</label><label><input type="checkbox" data-example-select> Grace</label><button type="button" disabled data-example-bulk-button>Archive selected</button><output data-example-output aria-live="polite">0 selected</output></section>

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.3`
HTML contract	`Native HTML elements and attributes`
Events	`Native browser events`

Accessibility

선택 개수를 live region으로 알리고 선택 항목이 없을 때 일괄 작업을 disabled 처리합니다.

Server template guidance

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