## Feature Examples

### Selected
- description: Indicate which item is chosed with `selected` prop.
- example:
```jsx
() => {
  const [selectedId, setSelectedId] = React.useState('favorite');

  const icons = [
    { id: 'favorite', icon: <Icons.Favorite />, label: 'Favorite' },
    { id: 'heart', icon: <Icons.Heart />, label: 'Heart' },
  ];

  return (
    <Box width="200px" direction="vertical" padding="20px" gap="4px">
      {icons.map(({ id, icon, label }) => (
        <ListItemSelectIcon
          key={id}
          icon={icon}
          label={label}
          selected={selectedId === id}
          onClick={() => setSelectedId(id)}
        />
      ))}
    </Box>
  );
};
```

### Size
- description: Item size depends on the icon provided. If a small icon is used, the list item will automatically adjust its size to fit.
- example:
```jsx
() => {
  const [selectedId, setSelectedId] = React.useState(null);

  const icons = [
    { id: 'favorite', icon: <Icons.Favorite />, label: 'Favorite' },
    { id: 'heart', icon: <Icons.HeartSmall />, label: 'Heart' },
  ];

  return (
    <Box width="200px" direction="vertical" padding="20px" gap="4px">
      {icons.map(({ id, icon, label }) => (
        <ListItemSelectIcon
          key={id}
          icon={icon}
          label={label}
          selected={selectedId === id}
          onClick={() => setSelectedId(id)}
        />
      ))}
    </Box>
  );
};
```

### Disabled
- description: Component can be disabled, it automatically changes color of all areas if used as text or icon.
- example:
```jsx
() => {
  const [selectedId, setSelectedId] = React.useState('favorite');

  const icons = [
    { id: 'favorite', icon: <Icons.Favorite />, label: 'Favorite' },
    { id: 'heart', icon: <Icons.Heart />, label: 'Heart', disabled: true },
  ];

  return (
    <Box width="200px" direction="vertical" padding="20px" gap="4px">
      {icons.map(({ id, icon, label, disabled }) => (
        <ListItemSelectIcon
          key={id}
          icon={icon}
          label={label}
          disabled={disabled}
          selected={selectedId === id}
          onClick={() => setSelectedId(id)}
        />
      ))}
    </Box>
  );
};
```

### Custom content
- description: Pass custom content in the item depending on your use-case. You can construct any dropdown based selection list, from status selector with `<Badges/>` or color selector when needed.
- example:
```jsx
() => {
  const [selectedId, setSelectedId] = React.useState('icon');

  const items = [
    {
      id: 'icon',
      icon: <Icons.Favorite />,
      label: 'Favorite icon',
    },
    {
      id: 'avatar',
      icon: <Avatar size="size24" name="John Doe" />,
      label: 'User avatar',
    },
    {
      id: 'badge',
      icon: <Badge skin="standard">Badge</Badge>,
      label: 'Notifications badge',
    },
  ];

  return (
    <Box width="200" direction="vertical" padding="20px" gap="4px">
      {items.map(({ id, icon, label }) => (
        <ListItemSelectIcon
          key={id}
          icon={icon}
          label={label}
          onClick={() => setSelectedId(id)}
        />
      ))}
    </Box>
  );
};
```