Stepper

手順の段を並べ、済んだ段といまの段を示すステッパー

インポート

ts
import { Stepper } from '@k8ordo/ui';

使い方

value はいまの段の位置（0 始まり）です。済んだ段にはチェックが付き、読み上げでは「完了」と添えます。いまの段は aria-current="step" で伝えます。

  1. PlanPick what fits完了
  2. PaymentCard or invoice
  3. ReviewCheck and send
tsx
const steps = [
  { label: 'Plan', description: 'Pick what fits' },
  { label: 'Payment', description: 'Card or invoice' },
  { label: 'Review', description: 'Check and send' },
];

<Stepper aria-label="Sign-up" steps={steps} value={1} />

済んだ段へ戻る

interactive を付けると、済んだ段がボタンになり、押すと onChange にその位置が届きます。先の段へは飛べません。

  3. ReviewCheck and send
tsx
const [step, setStep] = useState(2);

<Stepper
  aria-label="Sign-up"
  interactive
  onChange={setStep}
  steps={steps}
  value={step}
/>

縦に並べる

  1. PlanPick what fits完了
  2. PaymentCard or invoice
  3. ReviewCheck and send
tsx
<Stepper
  aria-label="Sign-up"
  orientation="vertical"
  steps={steps}
  value={1}
/>

Props

steps
Type: readonly StepperStep[]
Default: -
defaultValue?
Type: number
Default: -
interactive?
Type: boolean
Default: false
onChange?
Type: (value: number) => void
Default: -
orientation?
Type: 'horizontal'|'vertical'
Default: 'horizontal'
ref?
Type: Ref<HTMLOListElement>
Default: -
value?
Type: number
Default: -

型ベース（内部で固定する一部attrsは除外）: OlHTMLAttributes<HTMLOListElement>

このコンポーネントが描画する文言（ラベルやプレースホルダーなど）は、propsで指定しないとき文言辞書から解決されます。差し替え方は次を参照してください: i18n

Components