Fieldset

import { Fieldset, Radio, Box } from '@mediahuis/chameleon-react'

() => {
  const values = ['video', 'killed', 'the', 'radio', 'star'];
  const [checkedValue, setCheckedValue] = React.useState(values[0]);
  const isChecked = value => value === checkedValue;

  return (
    <Fieldset label="The Buggles">
      {values.map(value => (
        <Box key={value} mb={5}>
          <Radio
            name="buggles"
            id={`label-${value}`}
            value={value}
            label={value}
            checked={isChecked(value)}
            onChange={e => setCheckedValue(e.target.value)}
          />
        </Box>
      ))}
    </Fieldset>
  );
};

() => {
  const values = ['video', 'killed', 'the', 'radio', 'star'];
  const [checkedValue, setCheckedValue] = React.useState(values[0]);
  const isChecked = value => value === checkedValue;
  return (
    <Fieldset label="The Buggles">
      {values.map(value => (
        <Box key={value} mb={5}>
          <Radio
            name="buggles"
            id={`label-${value}`}
            value={value}
            label={value}
            checked={isChecked(value)}
            onChange={e => setCheckedValue(e.target.value)}
          />
        </Box>
      ))}
    </Fieldset>
  );
};

Name	Type	Default	Required	Description
action	Node	-	-	Contents displayed within the ActionLabel.
children	Node	-	true	Contents displayed within the PrimaryLabel.
className	String	-	-	Extend classNames.
disabled	Boolean	-	-	Specifies that a group of related form elements should be disabled
error	Boolean	-	-	Visually displayed as error text. Will add the necessary accessibility tags.
id	String	-	-	Native HTML id attribute.
label	Node	-	-	Will become the Fieldset's legend.
labelProps	{ "color": "String" "decoration": "'inherit''none''underline''line-through'" "fontFamily": "'inherit''primary''secondary''system'" "fontWeight": "'inherit''regular''medium''bold'" "size": "'Heading1''Heading2''Heading3''Heading4''Heading5''Heading6''Caption1''Caption2'" "textTransform": "'inherit''none''capitalize''uppercase''lowercase'" }	-	-	Props passed to the label component, the API may change in the future.
message	String	-	-	Contents displayed beneath the legend.
name	String	-	-	Specifies a name for the fieldset
optionalLabel	String	-	-	Contents displayed within the fieldset.

System Props

m, mb, ml, mr, mt, mx, my

float

System Props

Next to the properties listed in the propstable, a collection of system props can be added to any component for further general styling and layouting purposes. These props vary per component.

To read more about the system, click here to check out its dedicated page.

Fieldset label

Message can be set to provide additional information.

Label

<Fieldset
  label="Fieldset label"
  message="Message can be set to provide additional information."
>
  <Checkbox id="checkbox-message" label="Label" />
</Fieldset>

<Fieldset
  label="Fieldset label"
  message="Message can be set to provide additional information."
>
  <Checkbox id="checkbox-message" label="Label" />
</Fieldset>

Compared with TextField, the Fieldset is not required by default. The optionalLabel is additional feedback to the user, please provide it where needed. This will not be passed to it's children. You still have to provide an optionalLabel or required prop depending on the component.

Fieldset (code)

Props

System Props

System Props

Action

Disabled

Error

Message

OptionalLabel