Disclosure

A native details/summary for optional settings most people skip, like "Advanced".

FormsServer-rendered

Examples

Advanced settings

Advanced

Client ID

Only if the provider has no dynamic registration.

Example

Wrap

<Disclosure summary="Advanced">
  <Field label="Client ID" hint="Only if the provider has no dynamic registration.">
    <Input name="client_id" mono />
  </Field>
</Disclosure>

Usage

Wrap

import { Disclosure } from '@switchboard/ui'

<Disclosure summary="Advanced" open={Boolean(errors.client_id)}>…</Disclosure>

Props

Every component also takes mix, for css() and mixins applied after its own style.

`Disclosure`

Disclosure props
Prop	Type	Default	Description
summary*	RemixNode	–	The always-visible toggle text.
open	boolean	–	Start expanded, e.g. when a field inside has an error.

Also accepts every <details> attribute.

Accessibility

Native <details>: the summary is a button for assistive tech, toggles with Enter or Space, and works without JavaScript.
The chevron is decorative; the expanded state comes from the element.