Groups let you create collections from a set of elements. They allow buttons to transform into complex segmented controls. When used in an <Interview>, they even provide out of the box functionality for carousel like behavior.

Basic Usage #

<Group id='1' type='step'>
  {{
  header: (
    <Title>Please enter the following information:</Title>
  ),
  body: (
    <form>
      <input placeholder='First Name' />
      <input placeholder='Last Name' />
    </form>
  ),
}}
</Group>

Variations #

Simple Text vs JSX
Container slots easily adapt between accepting simple text strings and HTML/JSX structure. Strings don’t require any more syntax than a couple quote ticks. Header strings auto transform into titles (read up on this).

<Group id='1' type='step'>
  {{
    header: 'Why are you removing Emily from your policy?',
    body: 'select reason',
  }}
</Group>

Definitions #

{
  group:{
    header:{
      title:{
        margin:'0px 0px 16px 0px',
      },
    },
  }
}

Tokens #

@mixin group {
  @mixin group_header;
}

Videos #

Examples #