セグメントボタン
関連する 2〜5 個の選択肢を、つながったセグメントとして横に並べた 1 つのコントロールです。1 つ、または複数を選べます。
- カテゴリ
- アクション
- トークン
comp.segmented-button- レベル
- 基礎
- Web
tanrei-segmented-buttonschedule - SwiftUI
TanreiSegmentedButtonschedule - Jetpack Compose
TanreiSegmentedButtonschedule - Flutter
TanreiSegmentedButtonschedule - React Native
SegmentedButtonschedule
生成元 docs/status/status.json, specs/segmented-button.spec.json
すべてのデザインシステムにあるわけではありません
cupertino, m3-expressive-like, m3-like にあり、@tanrei/web/cupertino, @tanrei/web/m3-expressive-like, @tanrei/web/m3-like が登録します。
tanrei にはありません。 One choice among several is told by what it changes: tabs where it switches the content below, radio buttons where it sets a value, a button group where each button toggles on its own. 代わりに Tabs, Radio button, Button group を使います。
これを持たないシステムの上のプロダクトでも、自分のレイヤーに取り込み（自分のデザインシステムを作る）、コンポーネント自身のモジュールを読み込めば使えます。そのときは自分のシステムのトークンで描かれます。
"components": {
"include": ["segmented-button"]
}import '@tanrei/web/components/segmented-button';単一選択、アイコン付き、アイコンのみ
m3-like で表示セグメントの渡し方は、各プラットフォームが繰り返しの子要素を受け取るいつものやり方に従います。Web では子要素、SwiftUI ではビュービルダーの中のビュー、Compose ではコンテンツラムダの中の呼び出し、Flutter では segments のリスト、React Native では items の配列です。選択状態はセグメントではなくセット全体が値で持ちます。1 つを選ぶか複数を選ぶかは selection で決めます。
<tanrei-segmented-button label="期間" value="week">
<tanrei-segment value="day" label="日"></tanrei-segment>
<tanrei-segment value="week" label="週"></tanrei-segment>
<tanrei-segment value="month" label="月"></tanrei-segment>
</tanrei-segmented-button>
<!-- 複数選択。values はプロパティ（配列）です。属性では JSON の配列か、空白で区切った値を受け付けます。 -->
<tanrei-segmented-button id="days" selection="multiple" size="small" label="曜日" values="mon tue">
<tanrei-segment value="mon" label="月"></tanrei-segment>
<tanrei-segment value="tue" label="火"></tanrei-segment>
<tanrei-segment value="wed" label="水" disabled></tanrei-segment>
</tanrei-segmented-button>
<script type="module">
import '@tanrei/web/components/segmented-button';
// 要素は自分の value か values を更新してから change を発火します。
document.querySelector('[label="期間"]').addEventListener('change', (e) => showRange(e.detail.value));
document.querySelector('#days').addEventListener('change', (e) => setDays(e.detail.values));
</script>// 既定のシステムはセグメントボタンを持ちません。m3-like、m3-expressive-like、cupertino のエントリーと /all にあります。
import { Segment, SegmentedButton } from '@tanrei/react/m3-like';
// detail は、単一選択では { value }、複数選択では { values } です。
<SegmentedButton label="期間" value={range} onChange={(e) => 'value' in e.detail && setRange(e.detail.value)}>
<Segment value="day" label="日" />
<Segment value="week" label="週" />
<Segment value="month" label="月" />
</SegmentedButton>
<SegmentedButton selection="multiple" label="曜日" values={days} onChange={(e) => 'values' in e.detail && setDays(e.detail.values)}>
<Segment value="mon" label="月" />
<Segment value="tue" label="火" />
<Segment value="wed" label="水" disabled />
</SegmentedButton>import Tanrei
// バインディングの型で選び方が決まります。オプショナルの値なら 1 つ、Set なら複数です。
// .tag と .labelStyle は、ほかのモディファイアーより先に、TanreiSegment そのものに付けます。
TanreiSegmentedButton("期間", selection: $range) {
TanreiSegment("日").tag("day")
TanreiSegment("週").tag("week")
TanreiSegment("月").tag("month")
}
// .labelStyle(.iconOnly) が labelHidden にあたります。タイトルはそのままセグメントの名前になります。
TanreiSegmentedButton("文字揃え", selection: $alignment) {
TanreiSegment("左揃え", icon: "format_align_left").tag("start").labelStyle(.iconOnly)
TanreiSegment("中央揃え", icon: "format_align_center").tag("center").labelStyle(.iconOnly)
TanreiSegment("右揃え", icon: "format_align_right").tag("end").labelStyle(.iconOnly)
}import io.github.chnotchy.tanrei.components.TanreiSegment
import io.github.chnotchy.tanrei.components.TanreiSegmentedButton
import io.github.chnotchy.tanrei.components.TanreiSegmentedButtonSelectionMode
import io.github.chnotchy.tanrei.primitives.TanreiText
import io.github.chnotchy.tanrei.tokens.TanreiSegmentedButtonSize
// コールバックは単一選択でも複数選択でも 1 つです。単一選択では要素が 1 つの Set を受け取ります。
TanreiSegmentedButton(
onSelectionChange = { range = it.single() },
contentDescription = "期間",
selectedValue = range,
) {
TanreiSegment(value = "day", label = "日")
TanreiSegment(value = "week", label = "週")
TanreiSegment(value = "month", label = "月")
}
TanreiSegmentedButton(
onSelectionChange = { days = it },
contentDescription = "曜日",
selectionMode = TanreiSegmentedButtonSelectionMode.Multiple,
selectedValues = days,
size = TanreiSegmentedButtonSize.Small,
) {
TanreiSegment(value = "mon", label = "月")
TanreiSegment(value = "tue", label = "火")
// Compose では逆向きのフラグを使います。
TanreiSegment(value = "wed", label = "水", enabled = false)
}
// labelHidden でアイコンだけを描きます。ラベルはそのままセグメントの名前になります。
TanreiSegment(value = "start", label = "左揃え", labelHidden = true, icon = { TanreiText("format_align_left") })import 'package:tanrei/tanrei.dart';
// SegmentedButton と同じ形です。選択状態は 1 つの Set で持ち、単一選択のときの要素は多くても 1 つです。
TanreiSegmentedButton<String>(
semanticLabel: '期間',
selected: <String>{range},
onSelectionChanged: (Set<String> value) => setState(() => range = value.single),
segments: const <TanreiSegment<String>>[
TanreiSegment<String>(value: 'day', label: '日'),
TanreiSegment<String>(value: 'week', label: '週'),
TanreiSegment<String>(value: 'month', label: '月'),
],
);
TanreiSegmentedButton<String>(
semanticLabel: '曜日',
multiSelectionEnabled: true,
size: TanreiSegmentedButtonSize.small,
selected: days,
onSelectionChanged: (Set<String> value) => setState(() => days = value),
segments: const <TanreiSegment<String>>[
TanreiSegment<String>(value: 'mon', label: '月'),
TanreiSegment<String>(value: 'tue', label: '火'),
TanreiSegment<String>(value: 'wed', label: '水', enabled: false),
],
);
// labelHidden でアイコンだけを描きます。ラベルはそのままセグメントの名前になります。
const TanreiSegment<String>(value: 'start', label: '左揃え', icon: Icon(AppSymbols.formatAlignLeft), labelHidden: true);import { SegmentedButton } from '@tanrei/react-native';
// 制御コンポーネントです。onSelectionChange は値（単一選択）か値の配列（複数選択）を受け取ります。
<SegmentedButton
accessibilityLabel="期間"
value={range}
onSelectionChange={setRange}
items={[
{ value: 'day', label: '日' },
{ value: 'week', label: '週' },
{ value: 'month', label: '月' },
]}
/>
<SegmentedButton
selectionMode="multiple"
accessibilityLabel="曜日"
size="small"
values={days}
onSelectionChange={setDays}
items={[
{ value: 'mon', label: '月' },
{ value: 'tue', label: '火' },
{ value: 'wed', label: '水', disabled: true },
]}
/>
// アイコンだけのセグメント：{ value: 'start', label: '左揃え', icon: 'format_align_left', labelHidden: true }サイズと無効なセグメント
m3-like で表示構成要素
プロパティ
| プロパティ | 型 | 既定値 | 説明 |
|---|---|---|---|
selection | single | multiple | "single" | single lets people choose one option at a time, as a radio group does; multiple lets them switch each option on and off. |
value | string | null | The value of the selected segment while selection is single; null selects none. The segmented button sets it when a segment is activated and emits change; the product may also set it. |
values | strings | | The values of the selected segments while selection is multiple: a list of strings (the platforms take a set). An empty list selects none. |
size | small | medium | large | "medium" | Visual height (32 / 36 / 40), matching Button's heights so that the set can share a row with buttons. The hit area always meets the minimum target. A design system may add values. |
label | string | "" | The accessible name of the set: the question its options answer ("Range", "Text alignment"). Required. |
イベント
| イベント | 説明 |
|---|---|
change | The user changed the selection; carries value (single) or values (multiple) after the change, which the set now holds. |
アイテム
このコンポーネントが繰り返すアイテムの種類です。フィクスチャはアイテムを順に並べ、各プラットフォームはそれぞれの流儀で種類ごとに名前を付けます。
segment
One option of the set: a label, an optional icon, and the value that selects it.
| プロパティ | 型 | 既定値 | 説明 |
|---|---|---|---|
value | string | "" | Identifies the segment: the set's value or values name it by this, and change carries it. Unique within the set; required. |
label | string | "" | The segment's text and its accessible name. Required, even when labelHidden is true. |
icon | string | "" | The name of an icon (a glyph of the system's icon set). Give every segment of a set an icon, or none. |
labelHidden | boolean | false | Draws the icon alone and keeps label as the accessible name (an icon-only segment). |
disabled | boolean | false | Prevents choosing or clearing the segment; the arrow keys skip it. |
| 仕様 | Web | SwiftUI | Jetpack Compose | Flutter | React Native |
|---|---|---|---|---|---|
| アイテム | tanrei-segment | TanreiSegment | TanreiSegment | TanreiSegment | Segment |
value · プロパティ | value | tag | value | value | value |
label · プロパティ | label | title | label | label | label |
icon · プロパティ | icon | icon | icon | icon | icon |
labelHidden · プロパティ | labelHidden | labelStyle | labelHidden | labelHidden | labelHidden |
disabled · プロパティ | disabled | disabled | enabled | enabled | disabled |
| 備考 | A child element: <tanrei-segment value="week" label="Week" icon="…">, with label-hidden and disabled attributes, as <option> in a <select>. | TanreiSegment(_ title:, icon:).tag(value) in the view builder, as a Picker's tagged options; .labelStyle(.iconOnly) is labelHidden; disabled follows .disabled(_:). | TanreiSegment(value, label, icon, labelHidden, enabled) called in the TanreiSegmentedButton { } content lambda. enabled is the inverse flag. | TanreiSegment<T>(value:, label:, icon:, labelHidden:, enabled:) in the segments: list. enabled is the inverse flag. | The element type of the set's items array: { value, label, icon?, labelHidden?, disabled? }, where icon is the glyph's name. |
状態
振る舞い
EARS 記法による要件です。各プラットフォームの実装は、この ID に対応するテストで検証されます。要件の原文は仕様ファイルのものをそのまま掲載しています。
| ID | 要件 |
|---|---|
SEG-1 | WHEN the user activates an enabled segment by pointer, touch, Enter or Space WHILE selection is single and value is not that segment's value THE segmented button SHALL set value to the segment's value, so that the segment that was selected becomes unselected, and emit change exactly once with it; WHEN the segment is already selected THE segmented button SHALL change nothing and emit nothing, because a single choice is never cleared by its own segment. |
SEG-2 | WHEN the user activates an enabled segment by pointer, touch, Enter or Space WHILE selection is multiple THE segmented button SHALL add the segment's value to values, or remove it when values holds it, and emit change exactly once with the new values; values may become empty. |
SEG-3 | WHILE a segment's disabled is true THE segmented button SHALL NOT select or clear it or emit change for it, SHALL skip it with the arrow keys, SHALL NOT make it the Tab stop and SHALL expose the disabled state to assistive technology. |
SEG-4 | WHILE a segment is hovered, keyboard-focused or pressed THE segmented button SHALL render its container, label, icon, check, elevation and opacity from the component tokens of its condition (selected or unselected) in the highest-precedence active state, with precedence pressed over focused over hovered; focus gained by pointer or touch SHALL NOT select the focused state. A part the interaction states recolor changes over the component's state motion; only a change of condition uses the selection motion (SEG-16). |
SEG-5 | WHEN a segment receives keyboard focus THE segmented button SHALL show the focus ring inside the segment's container, where the set's outline and the neighbouring segments cannot cover or clip it, without animation; focus gained by pointer or touch SHALL NOT show it. |
SEG-6 | WHERE the set is shorter than the minimum target THE segmented button SHALL extend each segment's hit area above and below the set to sys.target.touch for touch input and sys.target.pointer for fine pointers without changing its visual size, and SHALL make each segment at least as wide as that target, because neighbouring segments cannot extend a hit area over each other; a platform that cannot tell the input type SHALL use sys.target.touch. |
SEG-7 | WHILE a segment's disabled is true THE segmented button SHALL render its container, label, icon, check, elevation and opacity from the disabled component tokens of its condition; the set's outline and the dividers SHALL keep their colors, so that the set keeps a visible boundary. |
SEG-8 | WHEN size names a value that the active design system does not have THE segmented button SHALL render with the default value's tokens, and in debug builds report the unknown value. |
SEG-9 | WHEN the segment is pressed by pointer, touch, Enter or Space THE segment SHALL show the pressed state without delay and SHALL keep it visible for at least sys.motion.duration.press-hold, even when the press ends sooner. |
SEG-10 | WHILE pressed THE segment SHALL answer as sys.behavior.pressed-feedback names: overlay applies the pressed tokens to the whole container at once; ripple grows the pressed state layer from the point of contact (from the center for keyboard activation); dim applies the pressed opacity to the whole control and draws no state layer; none draws no answer to the press. Under ripple and dim only the container color stays with the state under the press; label, icon, check, elevation, opacity and shape still come from the pressed tokens. Under none every part stays with the state under the press. The ripple grows over comp.segmented-button.motion.feedback-duration with comp.segmented-button.motion.state-easing, fades over the state duration of its size (comp.segmented-button.motion.state-duration.small, .medium or .large) with comp.segmented-button.motion.state-easing once the press has ended and press-hold has passed, and appears whole where motion is reduced. |
SEG-11 | THE segment SHALL ease its container corners by sys.shape.corner-smoothing (0 is a quarter circle, 0.6 the iOS continuous corner; a platform with only the OS curve draws it for any amount above 0) and show its keyboard focus as sys.behavior.focus-style names (ring or glow); a platform that cannot draw a choice SHALL fall back to the first value and state that in its README. |
SEG-12 | THE segmented button SHALL render a segment from the selected condition (comp.segmented-button.selected.container.color and the other selected parts) WHILE selection is single and value equals the segment's value, or selection is multiple and values holds it, and every other segment from the unselected condition (comp.segmented-button.unselected.container.color and so on); WHEN value or values names no segment THE segmented button SHALL select nothing for that name, and WHEN a segment's value is empty or repeats another segment's THE segmented button SHALL still render it and treat the first segment with a value as the one that value selects; in debug builds it SHALL report each of these. |
SEG-13 | THE segmented button SHALL lay its segments out in one row, in order, in a set at least the container height of its size tall (comp.segmented-button.container.height.medium for medium, and so on), filled with comp.segmented-button.set.color, with outer corners of comp.segmented-button.set.shape, an outline of comp.segmented-button.outline.width in comp.segmented-button.outline.color inside its edge, and its segments inset from that edge by comp.segmented-button.set.padding; the outer corners of the first and last segment SHALL be the set's corners less set.padding, so that the two curves stay concentric, and every other corner of a segment SHALL be comp.segmented-button.container.shape; each segment SHALL clip its fill, state layer and ripple to its own shape, and the set SHALL NOT clip a segment's elevation. |
SEG-14 | THE segmented button SHALL give every segment the same width: the widest segment's content plus the padding of its size on each side (comp.segmented-button.container.padding-inline.medium for medium, and so on), a segment's content being its leading glyph (its icon, or the check where one would be drawn), the gap of its size (comp.segmented-button.container.gap.medium, and so on) and its label, measured as if the segment were selected, so that selecting a segment never changes a width; WHERE the layout gives the set more width THE segmented button SHALL divide it equally among the segments, and WHERE less, it SHALL divide what it has equally and let labels wrap onto more lines rather than truncate, growing every segment to the tallest, with at least the padding-block of its size (comp.segmented-button.container.padding-block.medium, and so on) above and below. |
SEG-15 | THE segmented button SHALL centre a segment's content in it, the leading glyph first; SHALL set the label in the label style of its size (comp.segmented-button.label.typescale.medium, and so on) and the label color of its condition and state; and SHALL draw the icon in the icon color of its condition and state at the icon size of its size (comp.segmented-button.icon.size.medium, and so on) through the icon helper, with the family and fill of the segment's condition (selected for a selected segment, otherwise unselected), sys.icon.weight and an optical size clamped between sys.icon.optical-size.min and sys.icon.optical-size.max. |
SEG-16 | WHILE a segment is selected and its label is drawn THE segmented button SHALL draw the glyph check of the system's icon set in the leading position, in place of the segment's icon when it has one, as the filter chip draws its check (CHP-13, CHP-14), at the check size of its size (comp.segmented-button.check.size.medium, and so on) in the icon color of the selected condition, with sys.icon.family.selected, sys.icon.fill.selected, the weight comp.segmented-button.check.weight (not sys.icon.weight: the check is a control's own mark drawn on the selected fill, as the checkbox's is, CHK-12) and an optical size clamped between sys.icon.optical-size.min and sys.icon.optical-size.max, and SHALL NOT mirror it when the layout direction is right-to-left; the weight SHALL change the stroke of the glyph only, the check's box staying its check size; THE segmented button SHALL draw no mark of its own (no path, shape or character of its own for the check). An icon-only segment SHALL keep its icon when selected and draw no check; WHILE the check size of the segment's size is 0 THE segmented button SHALL draw no check, reserve no room for it, and keep the icon. WHEN a segment becomes selected or unselected THE segmented button SHALL fade the check in or out (a glyph is not drawn along a path), cross-fading it with the icon where the segment has one, and change the segment's colors and elevation over comp.segmented-button.motion.selection-duration with comp.segmented-button.motion.selection-easing, re-centring the content as the check comes and goes, and SHALL show the new condition at once where motion is reduced. |
SEG-17 | THE segmented button SHALL draw a line of comp.segmented-button.divider.width in comp.segmented-button.divider.color between each two neighbouring segments, taking that width between them and running from the set's top padding to its bottom padding; the line SHALL keep its color and full opacity whatever the state or condition of either segment, and SHALL be hidden from assistive technology. |
SEG-18 | WHILE selection is single THE segmented button SHALL be one Tab stop — the selected segment, or the first enabled segment while none is selected; WHILE a segment has keyboard focus Right Arrow and Down Arrow SHALL move focus to the next enabled segment and Left Arrow and Up Arrow to the previous one, wrapping at the ends, and Home and End to the first and last enabled segment, and each move SHALL also select the segment it reaches and emit change, as a radio group does; in a right-to-left layout Left Arrow SHALL move to the next segment and Right Arrow to the previous. |
SEG-19 | WHILE selection is multiple THE segmented button SHALL be one Tab stop — the segment that had focus last, or else the first selected segment, or else the first enabled segment; WHILE a segment has keyboard focus Right Arrow and Down Arrow SHALL move focus to the next enabled segment and Left Arrow and Up Arrow to the previous one, wrapping at the ends, and Home and End to the first and last enabled segment, without changing the selection, and Space or Enter SHALL switch the focused segment (SEG-2); in a right-to-left layout Left Arrow SHALL move to the next segment and Right Arrow to the previous. |
SEG-20 | WHILE selection is single THE segmented button SHALL expose the set as a radio group named by label and each segment as a radio with its checked state; WHILE selection is multiple THE segmented button SHALL expose the set as a group named by label and each segment as a toggle button with its pressed state, as a toggle Button is; in both, each segment SHALL be named by its own label whether or not it is drawn, over a name the product gives the segment on the element (aria-label or aria-labelledby) and expose its position and the number of segments, and the icons, the check, the dividers and the outline SHALL be hidden. |
SEG-21 | WHEN the layout direction is right-to-left THE segmented button SHALL order the segments from the right, mirror each segment's content (the glyph to the right of the label) and apply its paddings by logical start and end, and SHALL grow a ripple from the point of contact as in left-to-right. |
SEG-22 | WHILE a segment's label is empty and the product gives the segment a name of its own on the element — aria-label, or aria-labelledby naming an element — THE segmented button SHALL expose that name as the segment's accessible name; WHILE a segment's label is empty and the product gives it none THE segmented button SHALL still render the segment, and in debug builds report that it has no accessible name; WHILE a segment's labelHidden is true and its icon is empty THE segmented button SHALL draw the label anyway and in debug builds report the segment; WHILE the set's label is empty, or the set holds fewer than two or more than five segments, THE segmented button SHALL still render and in debug builds report it. |
SEG-23 | WHEN the colors or the elevation of a segment change between interaction states THE segmented button SHALL animate them over the state duration of its size (comp.segmented-button.motion.state-duration.small, .medium or .large) with comp.segmented-button.motion.state-easing, and SHALL change them at once where motion is reduced. |
SEG-24 | WHILE a segment is selected THE segmented button SHALL cast the elevation of its condition and state (comp.segmented-button.selected.container.elevation at rest, and so on) outside the segment and above its neighbours; THE segmented button SHALL NOT position itself or draw anything outside the set but that elevation. |
SEG-25 | IF the icon set cannot draw the check yet (its font is still loading or failed to load) THE segmented button SHALL draw nothing in the check's place, never the glyph's name as text, SHALL keep the room SEG-14 measures for it so that no width changes, SHALL still expose the segment's selected state, and SHALL show the check once the icon set can draw it, without the selection motion of SEG-16. |
SEG-26 | THE segmented button SHALL take its layout direction from where it is used — the direction of the nearest ancestor that sets one, and the platform's own where none does — and SHALL have no direction setting of its own; WHEN that direction changes while the segmented button is shown THE segmented button SHALL draw itself for the new direction at once, without a motion of its own, keeping its selection and its focus. |
SEG-27 | WHERE the layout direction is right-to-left THE segmented button SHALL draw a segment's icon mirrored left to right exactly when the system's icon set marks that glyph's name as mirrored or the product forces mirroring for that use, and unmirrored when the product forbids it: the icon helper mirrors the glyph inside its own box, about the box's vertical centre line, changing neither its place, size, color and fill nor the order SEG-21 gives. THE segmented button SHALL NOT mirror a glyph itself, and SHALL NOT mirror content the product gives as an image or a view of its own rather than by a glyph's name. The check of a selected segment is never mirrored (SEG-16). |
SEG-28 | THE segmented button SHALL lay out a segment's label as text of its own direction, isolated from the text around it: each takes the base direction of its first strong character, or the layout direction where it has none, so that a left-to-right word, a number with its sign or unit, a telephone number and an address keep their own order in a right-to-left layout and reorder nothing beside them; THE segmented button SHALL still place each label and align its lines by the layout direction, not by the text's own. |
SEG-29 | WHERE the platform has ARIA attributes (the web), WHEN the product sets an aria- attribute on a segment's host, by the attribute or by the ARIA property that reflects it, THE segmented button SHALL move it to the data-aria- attribute of the same name, so that the host is no second node with its name, description or state, and SHALL expose it on the element that carries the segment's role — an id reference by the elements it names in the host's tree or a tree around it, an error message as part of the description while the segment is invalid — except those a segment owns (aria-checked, aria-pressed, aria-disabled), which it SHALL move and not expose. WHEN the product removes the aria- attribute or its data-aria- twin, or sets the ARIA property that reflects it (ariaLabel, ariaDescribedByElements…) to null, THE segmented button SHALL take it off that element. WHEN the product sets an aria- attribute a segment owns THE segmented button SHALL report it in debug builds. The set's host carries its radio group or group role itself (SEG-20), so what the product writes on it is not moved, but for a name: WHILE the set's label is not empty THE segmented button SHALL hold the product's aria-label and aria-labelledby on that host as their data-aria- twins, so that label is the set's whole name although the platform gives aria-labelledby the precedence, and WHEN label is emptied SHALL give them back as they were written; WHILE it is empty a name the product gives so is the set's name and SHALL NOT be reported as having none in debug builds (SEG-22); WHEN the product removes one, or its data-aria- twin, or sets the ARIA property that reflects it to null, THE segmented button SHALL take it away. |
プラットフォーム別の名前対応
パリティは API が同一であることを意味しません。同じ契約を、各プラットフォームの流儀で表現します。
| 仕様 | Web | SwiftUI | Jetpack Compose | Flutter | React Native |
|---|---|---|---|---|---|
| コンポーネント | tanrei-segmented-button | TanreiSegmentedButton | TanreiSegmentedButton | TanreiSegmentedButton | SegmentedButton |
selection · プロパティ | selection | selection | selectionMode | multiSelectionEnabled | selectionMode |
value · プロパティ | value | selection | selectedValue | selected | value |
values · プロパティ | values | selection | selectedValues | selected | values |
size · プロパティ | size | size | size | size | size |
label · プロパティ | label | label | contentDescription | semanticLabel | accessibilityLabel |
change · イベント | change | selection | onSelectionChange | onSelectionChanged | onSelectionChange |
| 備考 | tanrei-segmented-button (selection, value, values, size, label) holds tanrei-segment children. value is an attribute and a property; values is a property (an array); the values attribute is also read, as JSON or as space-separated words, because the fixture harness writes attributes. It sets its own value or values before firing change, as a native control does. It puts role radiogroup (single) or group (multiple) and aria-label on its own element, and on each segment's inner <button> role radio with aria-checked, aria-posinset and aria-setsize (single), or aria-pressed (multiple), with a roving tabindex. A toggle button may not carry aria-posinset, so in a multiple set the row is a role="list" and each segment a role="listitem" that carries the position; ElementInternals is not used for the roles, because axe cannot see it. It is not form-associated. The check is the icon helper's check glyph in the check part (SEG-16). | TanreiSegmentedButton(_ label:, selection: Binding<V?>, size:) { TanreiSegment … } for single selection and TanreiSegmentedButton(_ label:, selection: Binding<Set<V>>, size:) { … } for multiple: the binding's type is selection, and writing it is change. SwiftUI's Picker with .pickerStyle(.segmented) is not used: its segments cannot be tokenised. A single-choice segment is a button with the .isSelected trait and its position as its accessibility value; a multiple-choice segment adds the .isToggle trait (iOS 17). Lagging behind SEG-16 and SEG-25: without an installed icon font it strokes the check as a vector of its own (TanreiChipGlyph, on the checkbox's mark geometry) instead of drawing nothing. Lagging behind SEG-16's weight (the check drawn at comp.segmented-button.check.weight): its check is drawn at sys.icon.weight. | One composable for both selections (Material's SingleChoiceSegmentedButtonRow and MultiChoiceSegmentedButtonRow in one): TanreiSegmentedButton(selectionMode, selectedValue, selectedValues, onSelectionChange, size, contentDescription) { TanreiSegment(…) }. State hoisting: the caller keeps selectedValue or selectedValues and moves it from onSelectionChange. The row is a selectableGroup(); a single-choice segment is selectable(role = Role.RadioButton) and a multiple-choice one toggleable(role = Role.Button), as the filter chip is. Compose has no radio group role. onSelectionChange is (Set<String>) -> Unit for both selections: a single choice passes a set of one (as the list does). Lagging behind SEG-16 and SEG-25: without an installed icon font it strokes the check as a vector of its own (TanreiDrawnGlyph, tanreiCheckPath) instead of drawing nothing. Lagging behind SEG-16's weight (the check drawn at comp.segmented-button.check.weight): its check is drawn at sys.icon.weight. | Shaped like Flutter's SegmentedButton<T> but built with the widgets library, without Material: TanreiSegmentedButton<T>(segments:, selected: Set<T>, onSelectionChanged:, multiSelectionEnabled:, size:, semanticLabel:). selected holds zero or one value while multiSelectionEnabled is false; the caller moves it from onSelectionChanged. A single-choice segment is Semantics(inMutuallyExclusiveGroup: true, checked:) and a multiple-choice one Semantics(button: true, toggled:), inside a Semantics(container: true, label:) for the set. A single-choice set is exposed with SemanticsRole.radioGroup, named by semanticLabel (SEG-20). Lagging behind SEG-25: it writes the check as the Material Symbols code point U+E5CA (tanreiCheckGlyph), and without the icon font it draws whatever the fallback face has for that code point instead of nothing. Lagging behind SEG-16's weight (the check drawn at comp.segmented-button.check.weight): its check is drawn at sys.icon.weight. | <SegmentedButton items={Segment[]} selectionMode value | values onSelectionChange size accessibilityLabel>; controlled, the caller moves value or values from onSelectionChange. The set has the radiogroup role (single) or the group role (multiple); each segment the radio role with accessibilityState.checked, or the button role with accessibilityState.selected, as a toggle Button is. The arrow keys work where a hardware keyboard is attached. Lagging behind SEG-25: it writes the ligature check into the glyph box, and without the icon font it prints the word instead of drawing nothing. Lagging behind SEG-16's weight (the check drawn at comp.segmented-button.check.weight): its check is drawn at sys.icon.weight. |
トークン
| トークン | 参照先 | 解決値（ライト） |
|---|---|---|
--tanrei-comp-segmented-button-check-size-large | sys.icon.extra-small | 16px |
--tanrei-comp-segmented-button-check-size-medium | sys.icon.extra-small | 16px |
--tanrei-comp-segmented-button-check-size-small | sys.icon.extra-small | 16px |
--tanrei-comp-segmented-button-check-weight | sys.icon.mark.weight | 500 |
--tanrei-comp-segmented-button-container-gap-large | sys.space.space100 | 8px |
--tanrei-comp-segmented-button-container-gap-medium | sys.space.space100 | 8px |
--tanrei-comp-segmented-button-container-gap-small | sys.space.space100 | 8px |
--tanrei-comp-segmented-button-container-height-large | — | 40px |
--tanrei-comp-segmented-button-container-height-medium | — | 36px |
--tanrei-comp-segmented-button-container-height-small | — | 32px |
--tanrei-comp-segmented-button-container-padding-block-large | — | 6px |
--tanrei-comp-segmented-button-container-padding-block-medium | — | 6px |
--tanrei-comp-segmented-button-container-padding-block-small | — | 6px |
--tanrei-comp-segmented-button-container-padding-inline-large | sys.space.space200 | 16px |
--tanrei-comp-segmented-button-container-padding-inline-medium | sys.space.space175 | 14px |
--tanrei-comp-segmented-button-container-padding-inline-small | sys.space.space150 | 12px |
--tanrei-comp-segmented-button-container-shape | sys.shape.corner.none | 0px |
--tanrei-comp-segmented-button-disabled-container-shape | — | 0px |
--tanrei-comp-segmented-button-disabled-opacity | — | 1 |
--tanrei-comp-segmented-button-divider-color | sys.color.outline | |
--tanrei-comp-segmented-button-divider-width | sys.border.hairline | 1px |
--tanrei-comp-segmented-button-focused-container-shape | — | 0px |
--tanrei-comp-segmented-button-focused-opacity | — | 1 |
--tanrei-comp-segmented-button-hovered-container-shape | — | 0px |
--tanrei-comp-segmented-button-hovered-opacity | — | 1 |
--tanrei-comp-segmented-button-icon-size-large | sys.icon.extra-small | 16px |
--tanrei-comp-segmented-button-icon-size-medium | sys.icon.extra-small | 16px |
--tanrei-comp-segmented-button-icon-size-small | sys.icon.extra-small | 16px |
--tanrei-comp-segmented-button-motion-feedback-duration | sys.motion.role.feedback | 450ms |
--tanrei-comp-segmented-button-motion-selection-duration | sys.motion.role.selection.mark | 250ms |
--tanrei-comp-segmented-button-motion-selection-easing | sys.motion.easing.state | cubic-bezier(0.2, 0, 0, 1) |
--tanrei-comp-segmented-button-motion-state-duration-large | sys.motion.role.state.large | 250ms |
--tanrei-comp-segmented-button-motion-state-duration-medium | sys.motion.role.state.default | 250ms |
--tanrei-comp-segmented-button-motion-state-duration-small | sys.motion.role.state.compact | 200ms |
--tanrei-comp-segmented-button-motion-state-easing | sys.motion.easing.state | cubic-bezier(0.2, 0, 0, 1) |
--tanrei-comp-segmented-button-outline-color | sys.color.outline | |
--tanrei-comp-segmented-button-outline-width | sys.border.hairline | 1px |
--tanrei-comp-segmented-button-pressed-container-shape | — | 0px |
--tanrei-comp-segmented-button-pressed-opacity | — | 1 |
--tanrei-comp-segmented-button-selected-container-color | sys.color.secondary-container | |
--tanrei-comp-segmented-button-selected-container-elevation | sys.elevation.level0 | |
--tanrei-comp-segmented-button-selected-disabled-container-color | — | |
--tanrei-comp-segmented-button-selected-disabled-container-elevation | — | |
--tanrei-comp-segmented-button-selected-disabled-icon-color | — | |
--tanrei-comp-segmented-button-selected-disabled-label-color | — | |
--tanrei-comp-segmented-button-selected-disabled-state-layer-color | — | |
--tanrei-comp-segmented-button-selected-focused-container-color | — | |
--tanrei-comp-segmented-button-selected-focused-container-elevation | — | |
--tanrei-comp-segmented-button-selected-focused-icon-color | — | |
--tanrei-comp-segmented-button-selected-focused-label-color | — | |
--tanrei-comp-segmented-button-selected-focused-state-layer-color | — | |
--tanrei-comp-segmented-button-selected-hovered-container-color | — | |
--tanrei-comp-segmented-button-selected-hovered-container-elevation | — | |
--tanrei-comp-segmented-button-selected-hovered-icon-color | — | |
--tanrei-comp-segmented-button-selected-hovered-label-color | — | |
--tanrei-comp-segmented-button-selected-hovered-state-layer-color | — | |
--tanrei-comp-segmented-button-selected-icon-color | sys.color.on-secondary-container | |
--tanrei-comp-segmented-button-selected-label-color | sys.color.on-secondary-container | |
--tanrei-comp-segmented-button-selected-pressed-container-color | — | |
--tanrei-comp-segmented-button-selected-pressed-container-elevation | — | |
--tanrei-comp-segmented-button-selected-pressed-icon-color | — | |
--tanrei-comp-segmented-button-selected-pressed-label-color | — | |
--tanrei-comp-segmented-button-selected-pressed-state-layer-color | — | |
--tanrei-comp-segmented-button-selected-state-layer-color | comp.segmented-button.selected.label.color | |
--tanrei-comp-segmented-button-set-color | — | |
--tanrei-comp-segmented-button-set-padding | sys.space.space0 | 0px |
--tanrei-comp-segmented-button-set-shape | sys.shape.corner.small | 6px |
--tanrei-comp-segmented-button-unselected-container-color | — | |
--tanrei-comp-segmented-button-unselected-container-elevation | sys.elevation.level0 | |
--tanrei-comp-segmented-button-unselected-disabled-container-color | — | |
--tanrei-comp-segmented-button-unselected-disabled-container-elevation | — | |
--tanrei-comp-segmented-button-unselected-disabled-icon-color | — | |
--tanrei-comp-segmented-button-unselected-disabled-label-color | — | |
--tanrei-comp-segmented-button-unselected-disabled-state-layer-color | — | |
--tanrei-comp-segmented-button-unselected-focused-container-color | — | |
--tanrei-comp-segmented-button-unselected-focused-container-elevation | — | |
--tanrei-comp-segmented-button-unselected-focused-icon-color | — | |
--tanrei-comp-segmented-button-unselected-focused-label-color | — | |
--tanrei-comp-segmented-button-unselected-focused-state-layer-color | — | |
--tanrei-comp-segmented-button-unselected-hovered-container-color | — | |
--tanrei-comp-segmented-button-unselected-hovered-container-elevation | — | |
--tanrei-comp-segmented-button-unselected-hovered-icon-color | — | |
--tanrei-comp-segmented-button-unselected-hovered-label-color | — | |
--tanrei-comp-segmented-button-unselected-hovered-state-layer-color | — | |
--tanrei-comp-segmented-button-unselected-icon-color | sys.color.on-surface-variant | |
--tanrei-comp-segmented-button-unselected-label-color | sys.color.on-surface | |
--tanrei-comp-segmented-button-unselected-pressed-container-color | — | |
--tanrei-comp-segmented-button-unselected-pressed-container-elevation | — | |
--tanrei-comp-segmented-button-unselected-pressed-icon-color | — | |
--tanrei-comp-segmented-button-unselected-pressed-label-color | — | |
--tanrei-comp-segmented-button-unselected-pressed-state-layer-color | — | |
--tanrei-comp-segmented-button-unselected-state-layer-color | comp.segmented-button.unselected.label.color | |
--tanrei-comp-segmented-button-label-typescale-large | sys.typescale.label | 500 14px/1.4286 |
--tanrei-comp-segmented-button-label-typescale-medium | sys.typescale.label | 500 14px/1.4286 |
--tanrei-comp-segmented-button-label-typescale-small | sys.typescale.label | 500 14px/1.4286 |
フィクスチャ
基準となる描画パターンです。全プラットフォームが同じ ID でスナップショットを撮り、結果を比較できるようにしています。
size: small (1)
small
selection: single value: week size: small label: Range items: 3 size: medium (7)
single
selection: single value: week label: Range items: 3 single-none
selection: single label: Range items: 3 multiple
selection: multiple values: ["mon","tue","thu"] label: Days items: 4 icons
selection: single value: grid label: View items: 3 icon-only
selection: single value: center label: Text alignment items: 3 disabled
selection: single value: day label: Range items: 3 selected-disabled
selection: single value: month label: Range items: 3 size: large (1)
large
selection: single value: week size: large label: Range items: 3 生成元 specs/segmented-button.spec.json, tokens/comp/segmented-button.tokens.json, design/tokens/
答えが数個に決まっている小さな問いを 1 つ尋ね、その答えを全部並べて見せたいときに使います。グラフの期間、リストの表示形式、段落の揃え方、リマインダーを繰り返す曜日などです。選んだ結果はすぐに画面に表れるようにします。単一選択では、矢印キーで移動するだけで選択が変わるからです。
選択肢は 2〜5 個が目安です。それより多いならメニューかリストを使います。選ぶこと自体がフォームの主な作業なら、ラジオボタンのほうが読みやすくなります。選んだ答えで画面に表示する内容そのものが入れ替わるなら、タブを使います。
この 4 つは、どれも関連するものを数個、横に並べます。見た目が似ているので混同しやすいのですが、押したときに何が起こるか、キーボードでどう移動するかが違います。
| コンポーネント | 何か | 選択 | キーボード | 用途 |
|---|---|---|---|---|
| セグメントボタン | 1 つの問いに答える 2〜5 個の選択肢を、つなげて 1 つにしたコントロール。 | 自分で持ちます（値で）。1 つ、または複数。 | Tab で止まるのは 1 か所。矢印キーで選択肢の間を移動し、単一選択では移動と同時に選びます。 | すぐに反映される、答えの決まった設定。日・週・月、左揃え・中央揃え・右揃えなど。 |
| ボタングループ | 独立したボタンを並べた行または列。間隔を空けて並べるか、つなげて 1 つの形にします。 | 持ちません。グループの中のトグルボタンは、それぞれ自分のオン・オフを持ちます。 | ボタンごとに Tab で止まります。 | 関連するアクション。キャンセル・下書きを保存・公開、互いに独立したトグルとしての太字・斜体・下線など。 |
| チップ | 折り返すかスクロールする 1 行に並ぶ、独立した小さなコントロール。 | 絞り込みチップが、それぞれ単独でオン・オフを持ちます。 | チップごとに Tab で止まります。 | リストの上の絞り込み、返信の候補、ユーザーが入力した項目。 |
| タブ | 1 つの主題を分けたビュー。それぞれがパネルを持ちます。 | 1 つ。いま表示しているビューです。 | Tab で止まるのは 1 か所。矢印キーで移動と同時に選びます。 | 表示する内容の切り替え。概要・アクティビティ・設定など。 |
迷ったときの見分け方：押すと何かが実行されるならボタングループです。値を設定するならセグメントボタンで、選択肢が多いときや互いに独立しているときはチップです。下の内容が入れ替わるならタブです。
- 単一選択（
selection="single"、既定）はラジオグループです。セグメントを選ぶと、それまでの選択は外れます。選ばれているセグメントをもう一度押しても何も起こらないので、単一選択がそのセグメント自身によって解除されることはありません。まだ何も選ばれていないことを示す必要があるフォームのために、何も選ばれていない状態（valueが空）から始めることもできます。 - 複数選択はトグルボタンの集まりです。セグメントごとにオンとオフを切り替え、すべてオフにもなります。少なくとも 1 つは選ばれていてほしいなら、セットが空になる変更をプロダクト側で反映しないようにします。
セット全体を無効にする disabled はありません。セグメントを 1 つずつ無効にします。無効なセグメントも位置と輪郭はそのまま残り、矢印キーでは飛ばされます。
- 選ばれたセグメントはラベルの前にチェックを表示します。アイコンがあるときは、その位置にチェックが入ります。こうすることで、選択が塗りの色だけで伝わることはありません。アイコンだけのセグメントはアイコンを残し、塗りつぶしの形で描きます。デザインシステムによってはチェックのサイズを 0 にしていることがあり、その場合はチェックを描かず、塗りとエレベーションで選択を示します。
- どのセグメントも、いちばん幅の広いセグメントに合わせた同じ幅になります。幅は選ばれた状態で測るので、チェックが現れても隣が動くことはありません。幅が足りないときは、ラベルを省略せずに折り返し、すべてのセグメントがいちばん高いものに合わせて伸びます。
labelHiddenにするとアイコンだけを描きます。それでもラベルは必須です。セグメントのアクセシブルネームになるからです。- サイズはセットの高さを決めます。すべてのサイズがボタンと同じ高さになるわけではありません（
m3-likeプリセットでは、small と medium はボタンと同じで、large はボタンより低くなります）。隣のボタンとは、サイズの名前ではなく高さで合わせてください。
- セットには、選択肢が答えている問いをラベルとして付けます。「期間」「文字揃え」などです。
- ラベルは 1〜2 語程度に短くし、形をそろえます。「日」「週」「月」のようにします。
- 1 つのセットでは、すべてのセグメントにアイコンを付けるか、どれにも付けないかのどちらかにします。
- 妥当な既定値があるなら初期値として選んでおき、未回答のように見えないようにします。
- アクションにセグメントボタンを使わない。セグメントは選択肢であり、クリックイベントも発火しません。ボタングループを使います。
- それぞれが画面全体を占めるビューの切り替えに使わない。タブを使います。
- 1 つのセットに 6 個以上のセグメントを入れたり、長さが極端に違うラベルを並べたりしない。どのセグメントもいちばん広いものの幅になります。
- 状態によってセグメントのラベルを変えない。選択状態は別に読み上げられます。
- ロール
radiogroup- ラベル付け
- The set is named by label: the question its options answer. Each segment is named by its own label, drawn or not (labelHidden). Icons, the check, the dividers and the outline are decorative: a segment's state is announced from its checked or pressed state, never from the check.
- 最小ターゲット
- 見た目のサイズが小さくても、ヒット領域は最小ターゲットサイズを満たします。 minimum 32px · pointer 44px · spacing 8px · touch 48px
キーボード操作
| キー | 動作 |
|---|---|
| Tab / Shift+Tab | Moves focus into the set (to the selected segment, the last focused one, or the first enabled one) and out of it. |
| Right Arrow / Down Arrow | Moves focus to the next enabled segment, wrapping; with single selection it also selects it (Left Arrow in right-to-left layouts). |
| Left Arrow / Up Arrow | Moves focus to the previous enabled segment, wrapping; with single selection it also selects it (Right Arrow in right-to-left layouts). |
| Home / End | Moves focus to the first or last enabled segment; with single selection it also selects it. |
| Enter / Space | Selects the focused segment (single) or switches it on or off (multiple). |
備考
- Single selection is a radio group: arrow keys move and select at once, as the radio button and tabs do, because a segment shows its effect without a noticeable delay. Multiple selection is a group of toggle buttons with one Tab stop: arrow keys only move focus, and Space or Enter switches.
- Selection is the set's: value or values holds the selected segments' values, and change carries the new ones. A segment's disabled is its own.
- iOS has no radio role: a segment of a single-choice set is a button with the selected trait and its position ("2 of 3") in its accessibility value, as the radio button is. Compose has no radio group role; the set is a selectable group and each segment `Role.RadioButton` (single) or a toggleable `Role.Button` (multiple), as the filter chip is.
- A segmented button chooses among options of one setting. Actions belong to a button group; switching views of one subject belongs to tabs.
- Text size does not clip a segment: labels wrap and every segment grows to the tallest. The icon is not text and keeps its size.
- How a state looks is a value decision of the active design system; components read the state's tokens and never compute the effect themselves.
生成元 specs/segmented-button.spec.json, tokens/sys/measure.tokens.json
- 単一選択では、セットはラベルを名前とするラジオグループで、各セグメントは選択状態を持つラジオボタンです。複数選択では、セットはラベルを名前とするグループで、各セグメントは押下状態を持つトグルボタンです。
- 各セグメントは、描かれているかどうかにかかわらず自分のラベルを名前とし、セット内での位置とセグメントの数を伝えます。アイコン、チェック、区切り線、輪郭は支援技術から隠します。選択状態をチェックのグリフから読み上げることはありません。
- Tab で止まるのはセットの中の 1 か所です。選ばれているセグメント、複数選択では最後にフォーカスのあったセグメント、それもなければ最初の有効なセグメントです。矢印キーで次または前の有効なセグメントへ移り、端では折り返します。Home と End で両端へ移ります。単一選択では、移動するたびにそのセグメントを選びます。複数選択では、Space か Enter でフォーカスのあるセグメントを切り替えます。右から左（RTL）のレイアウトでは、左矢印で次のセグメントへ移ります。
- 無効なセグメントは矢印キーで飛ばされ、Tab で止まる位置にもならず、無効であることを伝えます。
- 各セグメントのヒット領域は、セットの上下に最小ターゲットまで広がります。隣どうしのセグメントは互いの上にヒット領域を広げられないので、各セグメントの幅も最小ターゲット以上になります。
- フォーカスインジケーターは、フォーカスのあるセグメントの内側に描きます。輪郭や隣のセグメントに隠されることはありません。表示するのはキーボードフォーカスのときだけです。
- 文字を大きくすると、ラベルが折り返し、すべてのセグメントがいちばん高いものに合わせて伸びます。アイコンの大きさは変わりません。
- セットやセグメントのラベルがない場合、アイコンのないセグメントでラベルを隠そうとした場合、
valueやvaluesがどのセグメントも指していない場合、セグメントの値が空か重複している場合、セグメントが 2 個未満か 6 個以上の場合は、デバッグビルドで報告します。
プラットフォームごとの既知の制約：
- Web の複数選択のセットは、セグメントを囲むリストを通して各セグメントの位置を伝えます。トグルボタンは自分では位置を持てないためです。
- SwiftUI にはラジオグループのロールがありません。セットはラベルを名前とするコンテナです。単一選択のセグメントは、選択のトレイトを持つボタンで、位置（「2 of 3」）を値として伝えます。この文言は今のところ英語だけです。複数選択のセグメントはトグルで、位置を伝えません。独自の値を持たせると、トグルのオンとオフの読み上げが置き換わってしまうためです。
- SwiftUI：セットは、SwiftUI のセグメント形式のピッカーと同じく、与えられた幅いっぱいに広がります。本来の幅にとどめるには
.fixedSize(horizontal: true, vertical: false)を付けます。セグメントの影とフォーカスリングは、すべての角をそのセグメントのいちばん大きい角の丸みで描きます。アイコンに渡した SF Symbols は、選択されても塗りつぶしの形に変わりません。.fillのシンボルを自分で渡してください。矢印キーの動きはルールとしてテストしており、シミュレーター上のキーボードでは確かめていません。 - Compose にはラジオグループのロールがありません。セットは選択可能なグループで、各セグメントは、絞り込みチップと同じく、ラジオボタン（単一選択）か切り替え可能なボタン（複数選択）です。
- Flutter は、セグメントの位置もセグメントの数も伝えません。また、複数選択のセットは、グループではなくラベルを名前とするコンテナになります。Flutter のセマンティクスにどちらのプロパティもないためです。
- React Native：同じ幅にそろえるために、最初のレイアウトの後で各ラベルの幅を測っています。そのため、最初のフレームで親がセットより狭いと、いちばん長いラベルより狭い幅になることがあります。ハードウェアキーボードでの矢印キーと、Android で選択中のセグメントの影が隣の上に落ちるかどうかは、実機でまだ確かめていません。
cupertinoシステムでは、small と medium のセットの高さが 28 と 32 ではなく 30 と 34 になります。また、両端のセグメントは、外側の角より内側の角のほうが丸くなります。どちらもトークンか仕様の判断を待っています。
- セットにラベルを付け、アイコンだけのものも含めて、すべてのセグメントにラベルを付けます。
- 選んだ結果は、コントロールの近くにすぐ表れるようにします。単一選択では、キーボード利用者は移動するだけで選ぶので、反映が遅いと矢印キーが効いていないように感じられます。どうしても時間がかかるなら、結果が表れる場所に進行状況を表示します。
- 無効なセグメントがある理由が分かりにくいときは、近くで理由を伝えます。
- Web のセグメントボタンはフォームコントロールではありません。フォームと一緒に値を送るときは、
changeを受けて hidden の input に値を写します。