Basic Components
Design
Indique uma data
(opcional)
ex.: DD/MM/AAAA
Default
Indique uma data
(opcional)
24/01/2025
Janeiro
2025
D
S
T
Q
Q
S
S
0
0
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
31
Open
Design
Indique uma data
(opcional)
ex.: DD/MM/AAAA
Default (Padrão): Estado inicial, sem interação.
Indique uma data
(opcional)
24/01/2025
Valid (Válido): Valor inserido é aceito e validado.
Indique uma data
(opcional)
24/01/2025
Disable (Desabilitado): Componente inativo, sem possibilidade de interação.
Indique uma data
(opcional)
24/01/2025
Focus (Foco): Indica quando o campo está ativo pelo teclado ou clique.
Indique uma data
(opcional)
24/01/2025
Hover (Passagem do Mouse): Mostra que o componente é interativo ao passar o cursor.
Cenários do Date Input
O seletor de datas pode ser exibido em três variações:
Indique uma data
(opcional)
24/01/2025
Janeiro
2025
D
S
T
Q
Q
S
S
0
0
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
31
Dia (Day Selection): Exibe um calendário mensal para escolher o dia desejado.
Indique uma data
(opcional)
24/01/2025
Sexta-feira, 24
2025
Meses do ano
Janeiro
Fevereiro
Março
Abril
Maio
Junho
Julho
Agosto
Setembro
Outubro
Novembro
Dezembro
Mês (Month Selection): Permite navegar entre os meses para ajustar a seleção.
Indique uma data
(opcional)
24/01/2025
Sexta-feira, 24
Janeiro
Ano
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
Ano (Year Selection): Disponibiliza uma lista de anos para escolher datas mais distantes.
Basic Components
Date input
O Date Input é um campo de entrada que permite a seleção de datas de forma simples e intuitiva, composto por um campo de entrada onde o usuário pode selecionar a data, um ícone de calendário que funciona como atalho visual para facilitar a abertura do seletor de datas e um seletor de datas (Date Picker), que é a interface interativa que possibilita escolher a data em um calendário.
Esse componente é amplamente utilizado em formulários, agendamentos e filtros de data, garantindo praticidade e precisão na inserção das informações.
Design
Indique uma data
(opcional)
ex.: DD/MM/AAAA
Default
Indique uma data
(opcional)
24/01/2025
Janeiro
2025
D
S
T
Q
Q
S
S
0
0
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
31
Open
Design
Indique uma data
(opcional)
ex.: DD/MM/AAAA
Default (Padrão): Estado inicial, sem interação.
Indique uma data
(opcional)
24/01/2025
Valid (Válido): Valor inserido é aceito e validado.
Indique uma data
(opcional)
24/01/2025
Disable (Desabilitado): Componente inativo, sem possibilidade de interação.
Indique uma data
(opcional)
24/01/2025
Focus (Foco): Indica quando o campo está ativo pelo teclado ou clique.
Indique uma data
(opcional)
24/01/2025
Hover (Passagem do Mouse): Mostra que o componente é interativo ao passar o cursor.
Cenários do Date Input
O seletor de datas pode ser exibido em três variações:
Indique uma data
(opcional)
24/01/2025
Janeiro
2025
D
S
T
Q
Q
S
S
0
0
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
31
Dia (Day Selection): Exibe um calendário mensal para escolher o dia desejado.
Indique uma data
(opcional)
24/01/2025
Sexta-feira, 24
2025
Meses do ano
Janeiro
Fevereiro
Março
Abril
Maio
Junho
Julho
Agosto
Setembro
Outubro
Novembro
Dezembro
Mês (Month Selection): Permite navegar entre os meses para ajustar a seleção.
Indique uma data
(opcional)
24/01/2025
Sexta-feira, 24
Janeiro
Ano
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
Ano (Year Selection): Disponibiliza uma lista de anos para escolher datas mais distantes.