条件付きセクションRevealSectionExperimental

State-driven conditional section: show or hide a fieldset on `open` and reveal it as a properly-labelled, screen-reader-announced region. For declaration forms where sections appear based on prior answers (配偶者控除, conditional panels).

プレビュー

Props

表は横にスクロールできます
プロパティ型初期値説明
openboolean-Whether the section is shown. When false, nothing renders.
labelstring-Accessible name for the revealed region (or pass aria-labelledby).
announcebooleantrueAnnounce the section politely to screen readers when it appears.
...HTMLAttributes—-className, aria-labelledby, etc.

Usage

import { RevealSection, Switch } from "@gunjo/ui"

export function Example() {
  const [hasSpouse, setHasSpouse] = React.useState(false)
  return (
    <>
      <Switch checked={hasSpouse} onCheckedChange={setHasSpouse} aria-label="配偶者あり" />
      <RevealSection open={hasSpouse} label="配偶者控除の申告">
        {/* fields revealed (and announced) when hasSpouse is true */}
      </RevealSection>
    </>
  )
}