## Feature Examples


### Controlled example
- description: <p>This component can be used in controlled or uncontrolled modes. This ia an example of usage in controlled mode.</p>
- example: 
```jsx 
() => {
  const [selectedId, setSelectedId] = React.useState('1');
  
    const options = [
        {
          id: '0',
          skin: 'general',
          text: 'general',
        },
        {
          id: '1',
          skin: 'standard',
          text: 'standard',
        },
        {
          id: '2',
          skin: 'danger',
          text: 'danger',
        },
        {
          id: '3',
          skin: 'success',
          text: 'success',
        },
      ];
  
      return (
        <BadgeSelect
            options={options}
            selectedId={selectedId}
            onSelect={ selectedOption => setSelectedId(selectedOption.id)}
          />
        );
};
```

### Sizes
- description: <p>The BadgeSelect component has two different sizes: "small" and "medium" (default). This size is used to define the `<Badge/>` size.</p>
- example: 
```jsx 
() => {
  return (
    <Layout>
            <Cell>
              <BadgeSelect size="small" options={[{id: '0', skin: 'success', text:'success'}, {id: '1', skin: 'warning', text:'warning'}]} />
            </Cell>
            <Cell>
              <BadgeSelect size="medium" options={[{id: '0', skin: 'success', text:'success'}, {id: '1', skin: 'warning', text:'warning'}]} />
            </Cell>
          </Layout>
  );
};
```

### Type
- description: <p>The BadgeSelect has 3 different types: "solid" (default), "outlined", "transparent". This type is used to define the `<Badge/>` type.</p>
- example: 
```jsx 
() => {
  return (
    <Layout>
            <Cell>
              <BadgeSelect type="solid" options={[{id: '0', skin: 'warning', text:'warning'}, {id: '1', skin: 'success', text:'success'}]} />
            </Cell>
            <Cell>
              <BadgeSelect type="outlined" options={[{id: '0', skin: 'warning', text:'warning'}, {id: '1', skin: 'success', text:'success'}]} />
            </Cell>
            <Cell>
              <BadgeSelect type="transparent" options={[{id: '0', skin: 'warning', text:'warning'}, {id: '1', skin: 'success', text:'success'}]} />
            </Cell>
          </Layout>
  );
};
```

### Subtitle
- description: <p>The BadgeSelect can display a subtitle per option. This is an example of options with subtitles.</p>
- example: 
```jsx 
() => {
  return (
    <Layout>
        <Cell>
          <BadgeSelect
            options={
              [
                {id: '0', skin: 'general', text:'general', subtitle: 'subtitle'},
                {id: '1', skin: 'standard', text:'standard'},
              ]
            }
          />
        </Cell>
        <Cell>
          <BadgeSelect
            options={
              [
                {id: '0', skin: 'general', text:'general', subtitle: 'this is a very long subtitle'},
                {id: '1', skin: 'standard', text:'standard'},
              ]
            }
          />
        </Cell>
      </Layout>
  );
};
```