## Feature Examples

### Controlled example
- description: This component can be used in controlled or uncontrolled modes. This ia an example of usage in controlled mode.
- example:
```jsx
() => {
  const [selectedId, setSelectedId] = React.useState('1');

  return (
    <BadgeSelect
      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',
        },
      ]}
      selectedId={selectedId}
      onSelect={(selectedOption) => setSelectedId(String(selectedOption.id))}
    />
  );
};
```

### Sizes
- description: The BadgeSelect component has two different sizes: "small" and "medium" (default). This size is used to define the `<Badge/>` size.
- 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: The BadgeSelect has 3 different types: "solid" (default), "outlined", "transparent". This type is used to define the `<Badge/>` type.
- 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: The BadgeSelect can display a subtitle per option. This is an example of options with subtitles.
- 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>
  );
};
```