Select
O componente Select é um componente que permite que os usuários escolham um valor a partir de opções predefinidas.
tip
Usamos o componente Select do Radix por baixo dos panos, que trás com ele acessibilidade para nosso componente.
Importação
import { Select } from '@escaletech/delta'
Utilização
Resultado
Loading...
Disabled
Passe a propriedade disabled para mostrar que o select está desabilitado. Por padrão é false.
Resultado
Loading...
Customização
Aqui está um exemplo de customização do componente. Você pode aprender mais sobre isso na página de documentação de tema.
import { extendsTheme } from '@escaletech/delta'
export const theme = extendsTheme({
colors: {
// customiza as cores de fundo e texto do componente
formFieldBackgroundColorDisabled: 'red',
formFieldLabelColor: 'gray'
},
fonts: {
// customiza a familia de fonte do componente
formFieldFontFamily: 'Georgia'
}
})
Tokens
| Token | Descrição |
|---|---|
| colors.formFieldBackgroundColorDisabled | Cor de fundo quando o componente está desabilitado |
| colors.formFieldBorderColor | Cor da borda do componente |
| colors.formFieldBorderColorHover | Cor da borda quando o cursor do mouse está sobre o componente |
| colors.formFieldBorderColorDisabled | Cor da borda quando o componente está desabilitado |
| colors.formFieldColorDisabled | Cor do texto quando o componente está desabilitado |
| fonts.formFieldFontFamily | Família de fontes de texto do componente |
Props
| Propriedade | Descrição | Tipo | Padrão | Obrigatório |
|---|---|---|---|---|
| disabled | Se for true, o componente será desabilitado. | boolean | false | ❌ |
| options | Define as opções do Select. | [{ label: string, value: string }] | - | ✅ |
| label | string | - | ✅ | |
| defaultValue | O valor do select quando inicialmente renderizado. Use quando não precisar controlar o estado do select. | string | - | ❌ |
| value | O valor controlado do select. Deve ser usado em conjunto com onValueChange. | string | - | ❌ |
| onValueChange | Manipulador de eventos chamado quando o valor é alterado. | function | - | ❌ |
| defaultOpen | O estado aberto do select quando ele é renderizado inicialmente. Use quando não precisar controlar seu estado aberto. | boolean | - | ❌ |
| open | O estado aberto controlado do select. Deve ser usado em conjunto com onOpenChange. | boolean | - | ❌ |
| onOpenChange | Manipulador de eventos chamado quando o estado aberto da seleção é alterado. | function | - | ❌ |
| dir | A direção de leitura do select quando aplicável. Se omitido, herda globalmente de DirectionProvider ou assume o modo de leitura LTR (da esquerda para a direita. | enum | "ltr" ou "rtl" | ❌ |
| name | O nome do selecionado. Enviado com seu próprio formulário como parte de um par nome/valor. | string | - | ❌ |
Acessibilidade
Adere ao padrão de design ListBox WAI-ARIA design pattern..
Interações de teclado
| Chave | Descrição |
|---|---|
| Space | Quando o foco está em Select, abre o select e focaliza o item selecionado. Quando o foco está em um item, seleciona o item em foco. |
| Enter | Quando o foco está em Select, abre o select e foca o primeiro item. Quando o foco está em um item, seleciona o item em foco. |
| ArrowDown | Quando o foco está em Select, abre o select. Quando o foco está em um item, move o foco para o próximo item. |
| ArrowUp | Quando o foco está em Select, abre o select. Quando o foco está em um item, move o foco para o item anterior |
| Esc | Fecha a seleção e move o foco para Select. |