Tag

コンテンツにラベルやカテゴリを付与する小さなタグコンポーネント。フィルタータグや属性表示に使用します。

Basic

jui-tag の最も基本的な使用例です。

Default

Brand

Success

Danger

Outline

このコンポーネントが使用しているブラウザ機能と対応状況です。

機能	用途	Chrome	Firefox	Safari	ステータス
`color-mix()`	カラーバリエーション生成	111+	113+	16.2+	🟢 Baseline 2023
`:focus-visible`	キーボードフォーカス表示	86+	85+	15.4+	✅ Widely Available

💡 color-mix() は Baseline 2023（Newly Available）で、主要ブラウザすべてで対応済みです。Widely Available は 2025年後半の予定です。

機能	Baseline 達成	Widely Available 予定
`color-mix()`	2023年（Newly Available）	2025年後半
`:focus-visible`	2022年	WA 済み ✅

表示専用（デフォルト）: checkable を指定しない場合、タグはラベルを内包する単純なインライン要素（<span>）として描画され、role などは付与されません。icon Prop で挿入されるアイコンは装飾的要素のため aria-hidden="true" が付与されます。
選択可能（checkable）:
- ルート要素がネイティブの <button> として描画され、role="checkbox"・aria-checked（checked 状態を反映）・tabindex="0" が付与されます。
- Tab キーでフォーカスでき、Enter または Space キーでチェック状態を切り替えられます（切り替え時に jui-check イベントが発火）。
閉じる（closable）:
- 閉じるボタンはネイティブの <button type="button"> として描画され、aria-label に close-label Prop（デフォルト Remove）が設定されます。ボタン内のアイコン（SVG）は装飾的要素のため aria-hidden="true" が付与されます。
- クリックすると jui-close イベントが発火します。

コンポーネントが受け付ける属性（Props）の一覧と詳細仕様です。

Property	Attribute	Description	Type	Default
`checkable`	`checkable`	チェック可能にするか	`boolean`	`false`
`checked`	`checked`	チェック状態（外部制御）	`boolean`	`false`
`closable`	`closable`	閉じるボタンを表示するか	`boolean`	`false`
`closeLabel`	`close-label`	閉じるボタンのaria-label	`string`	`'Remove'`
`color`	`color`	カラーバリエーション	`"brand" \| "danger" \| "default" \| "info" \| "success" \| "warning"`	`'default'`
`icon`	`icon`	アイコンSVG文字列	`string`	`''`
`label`	`label`	タグテキスト	`string`	`''`
`size`	`size`	タグのサイズ	`"lg" \| "md" \| "sm"`	`'md'`
`variant`	`variant`	表示バリアント	`"outline" \| "soft" \| "solid"`	`'soft'`

コンポーネントから発火するカスタムイベントの一覧です。

Event	Description	Type
`juiCheck`	チェック切替時に発火	`CustomEvent<{ checked: boolean; }>`
`juiClose`	閉じるボタンクリック時に発火	`CustomEvent<{ label: string; }>`

コンポーネント内に子要素を挿入するためのスロット一覧です。

Slot	Description
	ラベルテキスト（label Prop より優先）

CSSから直接スタイリング可能な内部要素（Parts）の一覧です。

Built with StencilJS