Forms

Slug Input

semantic HTML

제목이나 식별자를 URL 안전한 소문자 slug로 입력합니다.

stablefreeSince 0.6

Live example

URL slugrelease-notesLowercase letters, numbers, and hyphens.

<section class="static-editor token-editor" data-static-input="slug"><label for="slug-source">URL slug</label><input id="slug-source" type="text" value="release-notes" data-slug-source data-slug-input autocomplete="off" spellcheck="false" inputmode="url"><output id="slug-value" data-slug-value data-slug-output aria-live="polite">release-notes</output><small>Lowercase letters, numbers, and hyphens.</small></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.6`
HTML contract	`Native HTML elements and attributes`
Events	`Native browser events`

Accessibility

native labelled input, required and invalid form states

Server template guidance

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