RevealGroup

Show only the fields that belong to the checked radio. CSS :has(), no JavaScript.

FormsServer-rendered

Examples

Fields per choice

Pick an option: only its fields stay visible. Without :has() support every block shows, so label each one.

Authentication

OAuthBearer tokenNone

Scopes

Only for OAuth.

Token

Only for Bearer token.

Example

Wrap

<RevealGroup name="auth" values={['oauth', 'bearer', 'none']}>
  <RadioGroup name="auth" label="Authentication" value="oauth">
    <Radio value="oauth" label="OAuth" />
    <Radio value="bearer" label="Bearer token" />
    <Radio value="none" label="None" />
  </RadioGroup>
  <Reveal when="oauth">
    <Field label="Scopes" hint="Only for OAuth."><Input name="scopes" /></Field>
  </Reveal>
  <Reveal when="bearer">
    <Field label="Token" hint="Only for Bearer token."><SecretInput name="token" /></Field>
  </Reveal>
</RevealGroup>

Usage

Wrap

import { RevealGroup, Reveal } from '@switchboard/ui'

<RevealGroup name="auth" values={['oauth', 'bearer']}>
  …radios named "auth"…
  <Reveal when="bearer">…</Reveal>
</RevealGroup>

Props

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

`RevealGroup`

RevealGroup props
Prop	Type	Default	Description
name*	string	–	Name of the radio group inside that drives the reveals.
values*	string[]	–	Every value of that radio group (letters, digits, - and _).

Also accepts every <div> attribute.

`Reveal`

Reveal props
Prop	Type	Default	Description
when*	string \| string[]	–	The radio value(s) this block belongs to.

Accessibility

Hidden blocks use display: none, so their fields leave the tab order and the accessibility tree.
Hidden fields still post with the form: the server must ignore fields for options that were not chosen.