v0.0.3

Documentation version

Open files in your editor

Project folderVersion

On a Mac, right-click the folder in Finder, hold Option, and choose Copy as Pathname.On Windows, hold Shift, right-click the folder, and choose Copy as path, then delete the quote marks.

Open files in

ComponentsLumos 0.0.2NewOpen component

Fieldset

A named group of fields, laid out in one to three columns.

Fieldset does two jobs at once: it says what a run of fields has in common, and it sets them out. The name is a real <legend>, which is what a screen reader reads before each field inside — so a radio group's question is heard once and every option after it makes sense.

astro

<Fieldset legend="Where should we send it?" variant="columns">
  <Input variant="first-name" />
  <Input variant="last-name" />
  <Input variant="zip-code" />
</Fieldset>

<Fieldset legend="Where should we send it?" variant="columns">
  <Input variant="first-name" />
  <Input variant="last-name" />
  <Input variant="zip-code" />
</Fieldset>

Props

Prop	Type	Default	What it does
`render`	`boolean`	`true`	Set to `false` to skip this component and everything inside it.
`legend`	`string`	None	What the fields inside have in common, named above them.
`variant`	`"stack" \| "columns" \| "thirds" \| "inline"`	`"stack"`	How the fields are set out. `stack` is one under another, `columns` is two abreast, `thirds` is three, and `inline` is a row that wraps — for a run of choices. Every column arrangement stacks below the width `Grid` calls medium.
`legendStyle`	`"heading" \| "label" \| "hidden"`	`"heading"`	How the legend is set. `heading` is larger and heavier than a field's label, `label` matches one — for a group inside a group — and `hidden` is read out but not shown, where the fields already say it themselves.