Field Group

<gr-field-group> | GrFieldGroup

Contents

Field groups are used to group multiple fields, usually checkboxes. It can be leveraged for vertical (default) or horizontal organization of the fields that are supplied as its children.

Option 1 Option 2 Option 3 
<gr-field-group label="Select items">
  <gr-checkbox checked>Option 1</gr-checkbox>
  <gr-checkbox>Option 2</gr-checkbox>
  <gr-checkbox>Option 3</gr-checkbox>
</gr-field-group>

Options

Horizontal layout

You can render the fields with a horizontal layout using the horizontal attribute.

Option 1 Option 2 Option 3 
<gr-field-group horizontal>
  <gr-checkbox checked>Option 1</gr-checkbox>
  <gr-checkbox>Option 2</gr-checkbox>
  <gr-checkbox>Option 3</gr-checkbox>
</gr-radio-group>

Labels

Use the label attribute to give the field group an accessible label. For labels that contain HTML, use the label slot instead.

Option 1 Option 2 Option 3 
<gr-field-group label="Select items">
  <gr-checkbox checked>Option 1</gr-checkbox>
  <gr-checkbox>Option 2</gr-checkbox>
  <gr-checkbox>Option 3</gr-checkbox>
</gr-field-group>

Properties

Property Attribute Description Type Default
horizontal horizontal Render the fields horizontal instead of vertical boolean false
label label The field group label. Recommended for proper accessibility. Alternatively, you can use the label slot. string ''

Slots

Slot Description
(default) The default slot where fields are placed.
"label" The field group label. Recommended for proper accessibility. Alternatively, you can use the label prop.

CSS custom properties

Name Description
--align-fields Alignment of fields on cross-axis, an align-items Flexbox property
--margin-between-fields Margin between the children
--margin-between-fields-horizontal Margin between the children when layout is horizontal