Selects | DS CANTA.

Select Basico

<select class="canta-select">
  <option value="">Selecione uma opcao</option>
  <option value="1">Opcao 1</option>
  <option value="2">Opcao 2</option>
  <option value="3">Opcao 3</option>
</select>

Estados

<select class="canta-select canta-select--error">
  <option value="">Estado de erro</option>
</select>

<select class="canta-select canta-select--success">
  <option value="">Estado de sucesso</option>
</select>

<select class="canta-select" disabled>
  <option value="">Desabilitado</option>
</select>

Tamanhos

<select class="canta-select canta-select--sm">...</select>
<select class="canta-select">...</select>
<select class="canta-select canta-select--lg">...</select>

Com Icone

person

<div class="canta-select-wrapper">
  <span class="canta-select-wrapper__icon">
    <span class="material-symbols-rounded">person</span>
  </span>
  <select class="canta-select canta-select--with-icon">
    <option value="">Selecione um usuario</option>
    <option value="1">Admin</option>
  </select>
</div>

Select Multiplo

<select class="canta-select canta-select--multiple" multiple>
  <option value="1">Opcao 1</option>
  <option value="2">Opcao 2</option>
  <option value="3">Opcao 3</option>
  <option value="4">Opcao 4</option>
  <option value="5">Opcao 5</option>
</select>

API

Classe	Descricao
`.canta-select`	Classe base do select (obrigatoria)
`.canta-select--error`	Estado de erro (borda vermelha)
`.canta-select--success`	Estado de sucesso (borda verde)
`.canta-select--sm`	Tamanho pequeno
`.canta-select--lg`	Tamanho grande
`.canta-select--multiple`	Select de selecao multipla
`.canta-select--with-icon`	Padding extra para icone (usar dentro de wrapper)
`.canta-select-wrapper`	Container para select com icone
`.canta-select-wrapper__icon`	Icone posicionado a esquerda do select
`disabled`	Atributo HTML nativo para desabilitar