You are currently viewing outdated (<=3.x) Chameleon documentation on our old website. For version >=4.x, check out our new website.

Current release: 3.5.0 | hub

components

Fieldset (code)

The <Fieldset> tag is used to group related elements in a form.

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

Props

NameTypeDefaultRequiredDescription
actionNode--Contents displayed within the ActionLabel.
childrenNode-trueContents displayed within the PrimaryLabel.
classNameString--Extend classNames.
disabledBoolean--Specifies that a group of related form elements should be disabled
errorBoolean--Visually displayed as error text. Will add the necessary accessibility tags.
idString--Native HTML id attribute.
labelNode--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.
messageString--Contents displayed beneath the legend.
nameString--Specifies a name for the fieldset
optionalLabelString--Contents displayed within the fieldset.

System Props

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.

Action

default: undefined

Adds an action or extra information to your item, mostly used for links.

Fieldset labelLinkText

Disabled

default: undefined

Will disable all interaction of it's children.

Fieldset label

Error

default: undefined

To convey an error to the user, you can set the error prop to true.

Fieldset label

Message

default: undefined

Give additional information to the user.

Fieldset label
Message can be set to provide additional information.

OptionalLabel

default: undefined

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 label(I'm optional)

© Copyright 2020 Mediahuis NV. All rights Reserved