Pinecone

Radio Group: Inverse 

<div class="niches radio-group" role="radiogroup">
    <button id="all" role="radio" type="button" aria-checked="true" class="button button--radio button--inverse">All</button>
    <button id="collaboration" role="radio" type="button" aria-checked="false" class="button button--radio button--inverse">Collaboration</button>
    <button id="communication" role="radio" type="button" aria-checked="false" class="button button--radio button--inverse">Communication</button>
    <button id="customer-or-member-relations" role="radio" type="button" aria-checked="false" class="button button--radio button--inverse">Customer or member relations</button>
    <button id="decision-making" role="radio" type="button" aria-checked="false" class="button button--radio button--inverse">Decision making</button>
    <button id="developer-tools" role="radio" type="button" aria-checked="false" class="button button--radio button--inverse">Developer tools</button>
    <button id="finance" role="radio" type="button" aria-checked="false" class="button button--radio button--inverse">Finance</button>
    <button id="marketing" role="radio" type="button" aria-checked="false" class="button button--radio button--inverse">Marketing</button>
    <button id="time-management" role="radio" type="button" aria-checked="false" class="button button--radio button--inverse">Time management</button>
</div>
 
<div class="niches radio-group" role="radiogroup">
	{% for button in buttons %}
	<button id="{{ button.label | slugify }}" role="radio" type="button" aria-checked="{{ button.checked }}" class="button button--radio{% if modifier %} button--{{ modifier }}{% endif %}">{{ button.label | safe }}</button>
	{% endfor %}
</div>
 
{
  "label": "Niches",
  "buttons": [
    {
      "label": "All",
      "checked": true
    },
    {
      "label": "Collaboration",
      "checked": false
    },
    {
      "label": "Communication",
      "checked": false
    },
    {
      "label": "Customer or member relations",
      "checked": false
    },
    {
      "label": "Decision making",
      "checked": false
    },
    {
      "label": "Developer tools",
      "checked": false
    },
    {
      "label": "Finance",
      "checked": false
    },
    {
      "label": "Marketing",
      "checked": false
    },
    {
      "label": "Time management",
      "checked": false
    }
  ],
  "modifier": "inverse",
  "bodyClass": "has-blue-500-background-color"
}

Radio Group

The Radio Group displays a group of related buttons using flexbox. The parent element must have a class of .radio-group and a role of radiogroup and the buttons must have a role of radio and be the direct descendants of the parent element.

Toggling the aria-checked state of one button in a Radio Group to true will set the aria-checked state of all the other buttons to false.

To instantiate a Radio Group, the following JavaScript must be called:

const radioGroup = document.querySelector('.radio-group');
new Pinecone.RadioGroup( radioGroup );