# 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. ![](/files/mdmjSf2zyKbdDSYZC4lU)Standard Checkbox type for the `SelectionList` ![](/files/eOXSAtqw24BIkQfcgWTS)`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 ```tsx

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.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. In explicabo vitae, maxime voluptas repudiandae facilis!

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

``` ## Components Dependency For this component elaboration, there were used the following internal components: * [Telicon](/sds/sds-components/simple-components/telicon.md) * [Text](/sds/sds-components/simple-components/text.md) ## Live Demo For detailed code usage documentation, see the Storybooks for each framework below. ### React {% embed url="" %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://2600hz.gitbook.io/sds/sds-components/form-controls/selection-list/code.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.