Select

Apresentação

O componente Select é responsável por criar um menu suspenso que permite aos usuários selecionar uma opção de uma lista de alternativas. Ele pode ser usado em dois modos: nativo (usando o elemento select do HTML) ou personalizado (usando um dropdown customizado).

Quando usar

• Para seleção de opções em formulários
• Para escolha de categorias
• Para seleção de países
• Para escolha de idiomas
• Para seleção de moedas
• Para escolha de datas
• Para seleção de filtros
• Para escolha de configurações
• Para seleção de status
• Para escolha de opções de pagamento

Forma básica de uso

import { Select } from 'eitri-luminus';

// Select básico
<Select placeholder="Selecione uma opção">
  <Select.Item value="1">Opção 1</Select.Item>
  <Select.Item value="2">Opção 2</Select.Item>
  <Select.Item value="3">Opção 3</Select.Item>
</Select>

// Select com valor inicial
<Select 
  placeholder="Selecione uma opção"
  defaultValue="2"
>
  <Select.Item value="1">Opção 1</Select.Item>
  <Select.Item value="2">Opção 2</Select.Item>
  <Select.Item value="3">Opção 3</Select.Item>
</Select>

// Select com evento onChange
<Select 
  placeholder="Selecione uma opção"
  onChange={(e) => console.log(e.target.value)}
>
  <Select.Item value="1">Opção 1</Select.Item>
  <Select.Item value="2">Opção 2</Select.Item>
  <Select.Item value="3">Opção 3</Select.Item>
</Select>

// Select com classes personalizadas
<Select 
  placeholder="Selecione uma opção"
  className="select-primary"
  menuClassName="menu-primary"
>
  <Select.Item value="1">Opção 1</Select.Item>
  <Select.Item value="2">Opção 2</Select.Item>
  <Select.Item value="3">Opção 3</Select.Item>
</Select>

// Select desabilitado
<Select 
  placeholder="Selecione uma opção"
  disabled
>
  <Select.Item value="1">Opção 1</Select.Item>
  <Select.Item value="2">Opção 2</Select.Item>
  <Select.Item value="3">Opção 3</Select.Item>
</Select>

// Select com controles nativos
<Select 
  placeholder="Selecione uma opção"
  useNativeControls
>
  <Select.Item value="1">Opção 1</Select.Item>
  <Select.Item value="2">Opção 2</Select.Item>
  <Select.Item value="3">Opção 3</Select.Item>
</Select>

// Select com valor controlado
const [value, setValue] = useState('');
<Select 
  placeholder="Selecione uma opção"
  value={value}
  onChange={(e) => setValue(e.target.value)}
>
  <Select.Item value="1">Opção 1</Select.Item>
  <Select.Item value="2">Opção 2</Select.Item>
  <Select.Item value="3">Opção 3</Select.Item>
</Select>

Propriedades

Propriedade	Tipo	Descrição
placeholder	string	Texto exibido quando nenhuma opção está selecionada
useNativeControls	boolean	Usa o controle nativo do navegador
menuClassName	string	Classes CSS adicionais para o menu
value	string	Valor atual (controlado)
defaultValue	string	Valor inicial
disabled	boolean	Desabilita o select
onChange	function	Função chamada quando o valor muda
className	string	Classes CSS adicionais
id	string	Identificador único do componente

Select.Item Props

Propriedade	Tipo	Descrição
value	string	Valor da opção
onPress	function	Função chamada quando a opção é clicada
className	string	Classes CSS adicionais
id	string	Identificador único do componente

Heranças

O componente Select e Select.Item herdam todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

• Propriedades de estilo (margin, padding, etc)
• Propriedades de layout (flex, grid, etc)
• Propriedades de posicionamento
• Propriedades de acessibilidade
• Propriedades de identificação (id, data-e)

Observações

• O componente usa a classe 'select' para estilização base
• É possível personalizar a aparência usando classes do Tailwind
• O componente é responsivo por padrão
• Mantém a semântica HTML apropriada
• Suporta estados controlados e não controlados
• Pode ser desabilitado
• Suporta eventos de mudança
• Pode ser estilizado com diferentes cores
• Mantém a acessibilidade por padrão
• Pode ser usado em formulários
• Suporta diferentes tamanhos
• Pode ser combinado com labels
• Suporta controles nativos e personalizados
• Pode ser usado em layouts flexíveis