Code

Props

Props	Data Type	Required
className	string	❌
type	'Checkbox' | 'Radio'	❌
style	'List' | 'Grid'	❌
listGap	number	❌
gridColumns	number	❌
gridXGap	number	❌
gridYGap	number	❌
gridGap	number	❌
children	SelectionItem component	❌
onChange	function event	❌

Description

The SelectionList component basically works as the ChecboxGroup and RadioGroup components, allowing developers to select which type of behavior they prefer for the listed elements (Checkbox allows multiple selections, while the Radio type only allows one single selection at the time).

This component offers the extra feature of adding visual indicators like icons or adding descriptions to the listed elements, offering more information to users.

Radio Type Variant

Something developers should keep in mind, is that the Radio type variant of the SelectionList component, is that it allows to show nested content inside the option. So, besides the title, icon and description that can be added to the element, developers have the extra feature of adding nested content that only is going to be displayed when user selects the specific option, like if it was an accordion component.

Standard Checkbox type for the SelectionList

Radio type showing the nested content.

Children

To generate the structure required for the menu, the developer is able to insert the following components as children elements:

SelectionItem

Props	Data Type	Required
id	string	✅
name	string	❌
value	string	✅
defaultChecked	boolean	❌
title	string	❌
description	string	❌
icon	Available Telicon Icons	❌
type	'Checkbox' | 'Radio'	❌
disabled	boolean	❌
children	any	❌

Style

Style prop is going to change the visual distribution of the SelectionList component, from a column (Default list style) to a row (Grid style). Besides that, developers can control the gaps between elements using the props listGap, gridGap, gridYGap and gridXGap. Finally, in the case developers are using the Grid style for the SelectionList component, they can also control the number of columns to show with gridColumns prop.

Code

<SelectionList
  className="SelectionListExample"
  onChange={changeEvent}
  style="List"
  type="Checkbox"
>
  <SelectionItem
    description="Lorem Ipsum"
    id="example1"
    name="example"
    title="Example 1"
    value="example1"
  >
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. In explicabo vitae, maxime voluptas repudiandae facilis! Eius amet aspernatur repellendus distinctio vel esse, consectetur nisi repudiandae, saepe animi, sit reprehenderit fuga.
    </p>
  </SelectionItem>
  <SelectionItem
    description="Lorem Ipsum"
    id="example2"
    name="example"
    title="Example 2"
    value="example2"
  >
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. In explicabo vitae, maxime voluptas repudiandae facilis!
    </p>
  </SelectionItem>
  <SelectionItem
    description="Lorem Ipsum"
    id="example3"
    name="example"
    title="Example 3"
    value="example3"
  >
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit.
    </p>
  </SelectionItem>
</SelectionList>

Components Dependency

For this component elaboration, there were used the following internal components:

• Telicon

• Text

Live Demo

For detailed code usage documentation, see the Storybooks for each framework below.

React

Form Controls / Selection List - Base Selection List ⋅ Storybooksipster-react-component-storybook.netlify.app