fieldset

Checkbox groups•
Radio groups•
Horizontal layouts•
Errors and error messages•
Custom item space

Props

Prop name	Type	Default	Description
`legend`	`ReactNode`		The legend as content or a Legend component. If you don't pass a Legend component, the Fieldset will add create one for you with the content given in this prop. Legend
`horizontal`	`boolean \| undefined`	`false`	Allows for horizontal positioning of fieldset items, mostly useful for radio buttons and checkboxes.
`valid`	`boolean \| null \| undefined`	`null`	Controls appearance of info text, shows it as error if set to false.
`innerRef`	`Ref<HTMLFieldSetElement> \| undefined`		React ref forwarded to the wrapping "fieldset" element.
`info`	`ReactNode`	`null`	Provides extra information for the fieldset.
`infoError`	`ReactNode`	`null`	Provides extra information for an error, gets displayed only when `valid` is set to false.
`extraClasses`	`string \| undefined`		Injection in className.
`children`	`ReactNode`	`Required`	Children are required.
`itemSpacing`	`"1" \| "flush" \| "half" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12" \| undefined`		Choose the space between each fieldset item. Default spacing is defined by static library and depends on the layout.
`noWrap`	`boolean \| undefined`	`false`	When on horizontal layout: prevents items from wrapping to a new line on smaller screens.

Fieldset component is used to group several form inputs that are related to each other, this helps users understand forms better.

For example:

User information: "First name", "Last name", "Date of birth".
Trip details: "Origin", "Destination", "Departure date", "Return date"
Contact details: "Telephone number", "Address", "E-mail address"

A fieldset is captioned by a legend that should be provided via the legend prop and as an string, element or Legend Component.

All direct children of this component will be wrapped in an enclosing <div> to provide proper spacing between elements and groups in a given form.

Checkbox groups

The legend prop can be a simple string:

import { Fieldset, Checkbox } from '@flixbus/honeycomb-react';

<Fieldset legend="Are you a dog person?" info="Please confirm you're fully aware of the choice made above">
  <Checkbox
    id="checkbox-2"
    value="yes"
    label="Yes!"
  />
  <Checkbox
    id="checkbox-3"
    value="absolutely"
    label="Absolutely!"
  />
</Fieldset>
import { Fieldset, Checkbox } from '@flixbus/honeycomb-react';

<Fieldset legend="Are you a dog person?" info="Please confirm you're fully aware of the choice made above">
  <Checkbox
    id="checkbox-2"
    value="yes"
    label="Yes!"
  />
  <Checkbox
    id="checkbox-3"
    value="absolutely"
    label="Absolutely!"
  />
</Fieldset>

Or you can pass your own Legend component if you need some extra customizations:

import { Fieldset, Checkbox, Legend } from '@flixbus/honeycomb-react';

<Fieldset legend={<Legend extraClasses="dog-person-legend">Are you a cat person?</Legend>}>
  <Checkbox
    id="checkbox-0"
    value="yes"
    label="Yes!"
  />
  <Checkbox
    id="checkbox-1"
    value="absolutely"
    label="Absolutely!"
  />
</Fieldset>
import { Fieldset, Checkbox, Legend } from '@flixbus/honeycomb-react';

<Fieldset legend={<Legend extraClasses="dog-person-legend">Are you a cat person?</Legend>}>
  <Checkbox
    id="checkbox-0"
    value="yes"
    label="Yes!"
  />
  <Checkbox
    id="checkbox-1"
    value="absolutely"
    label="Absolutely!"
  />
</Fieldset>

Radio groups

When grouping radios it is recommended to use the role="radiogroup" attribute on the fieldset for improved accessibility.

Normally for groups of radios and checkboxes it makes more sense to use the Fieldset own info prop and error messages.

import { Fieldset, Radio } from '@flixbus/honeycomb-react';

<Fieldset legend="Which type of person are you?" role="radiogroup" horizontal>
  <Radio
    name="person-type"
    id="radio-1"
    value="a-cat-person"
    label="A cat person"
  />
  <Radio
    name="person-type"
    id="radio-2"
    value="a-dog-person"
    label="A dog person"
  />
  <Radio
    name="person-type"
    id="radio-3"
    value="a-pokemon-person"
    label="A pokemon person"
  />
</Fieldset>
import { Fieldset, Radio } from '@flixbus/honeycomb-react';

<Fieldset legend="Which type of person are you?" role="radiogroup" horizontal>
  <Radio
    name="person-type"
    id="radio-1"
    value="a-cat-person"
    label="A cat person"
  />
  <Radio
    name="person-type"
    id="radio-2"
    value="a-dog-person"
    label="A dog person"
  />
  <Radio
    name="person-type"
    id="radio-3"
    value="a-pokemon-person"
    label="A pokemon person"
  />
</Fieldset>

Horizontal layouts

By default, the horizontal layout allows items to wrap to a new line when there is not enough space available for the items.

If that's not desirable you can use the noWrap prop to prevent it from happening.

Hint: resize your browser window and notice the differences between the previous example and the next.

import { Fieldset, Input } from '@flixbus/honeycomb-react';

<Fieldset horizontal noWrap>
  <Input id="first-name-0" label="First name" defaultValue="Ash" />
  <Input id="last-name-0" label="Last name" defaultValue="Ketchum" />
  <Input id="age-0" label="Age" defaultValue="10" type="number" />
</Fieldset>
import { Fieldset, Input } from '@flixbus/honeycomb-react';

<Fieldset horizontal noWrap>
  <Input id="first-name-0" label="First name" defaultValue="Ash" />
  <Input id="last-name-0" label="Last name" defaultValue="Ketchum" />
  <Input id="age-0" label="Age" defaultValue="10" type="number" />
</Fieldset>

Errors and error messages

Our component makes it possible to display error messages related to the whole fieldset group.

Please note that the infoError message is only displayed if valid is set to false. In order to do that pass infoError alongside with valid={false} props to get the message shown. Individual inputs can have their own "validation" modifiers.

Behind the scenes we also take care of passing the proper aria attributes and IDs, so you info messages are bound to respective input fields and handled by the screen readers when needed.

import { Fieldset, Input } from '@flixbus/honeycomb-react';

<Fieldset
  legend="Passenger details"
  info="All fields are required"
  infoError="Last name cannot be empty"
  valid={false}
  horizontal
  noWrap
>
  <Input id="first-name-1" label="First name" defaultValue="Ash" valid={true} />
  <Input id="last-name-1" label="Last name" valid={false} />
  <Input id="age-1" label="Age" valid={false} type="number" />
</Fieldset>
import { Fieldset, Input } from '@flixbus/honeycomb-react';

<Fieldset
  legend="Passenger details"
  info="All fields are required"
  infoError="Last name cannot be empty"
  valid={false}
  horizontal
  noWrap
>
  <Input id="first-name-1" label="First name" defaultValue="Ash" valid={true} />
  <Input id="last-name-1" label="Last name" valid={false} />
  <Input id="age-1" label="Age" valid={false} type="number" />
</Fieldset>

Custom item space

You can use the itemSpacing prop to customize the space between the items. All space options that are available for the space helpers are also available for fieldset items.

import { Checkbox, Fieldset } from '@flixbus/honeycomb-react';

const [yesChecked, setYesChecked] = React.useState(false);
const [moreChecked, setMoreChecked] = React.useState(false);

<Fieldset
  legend="A ramen a day gets all stresses away..."
  info="Please confirm your appreciation for ramen"
  infoError="Both checkboxes need to be selected"
  valid={(yesChecked && moreChecked)}
  itemSpacing="4"
  horizontal
>
  <Checkbox
    id="validation-checkbox"
    value="yes"
    label="Hell yeah!"
    valid={yesChecked}
    onChange={(event) => setYesChecked(event.target.checked)}
    small
  />
  <Checkbox
    id="validation-checkbox-2"
    value="one-more"
    label="One more please!"
    valid={moreChecked}
    onChange={(event) => setMoreChecked(event.target.checked)}
    small
  />
</Fieldset>
import { Checkbox, Fieldset } from '@flixbus/honeycomb-react';

const [yesChecked, setYesChecked] = React.useState(false);
const [moreChecked, setMoreChecked] = React.useState(false);

<Fieldset
  legend="A ramen a day gets all stresses away..."
  info="Please confirm your appreciation for ramen"
  infoError="Both checkboxes need to be selected"
  valid={(yesChecked && moreChecked)}
  itemSpacing="4"
  horizontal
>
  <Checkbox
    id="validation-checkbox"
    value="yes"
    label="Hell yeah!"
    valid={yesChecked}
    onChange={(event) => setYesChecked(event.target.checked)}
    small
  />
  <Checkbox
    id="validation-checkbox-2"
    value="one-more"
    label="One more please!"
    valid={moreChecked}
    onChange={(event) => setMoreChecked(event.target.checked)}
    small
  />
</Fieldset>