Optional acceptDefine os tipos de arquivos que o campo de input do tipo "file" aceitará para upload. Example:
<Input
type="file"
accept=".jpg,.png"
/>
Optional autoIndica se o input deve forçar a capitalização de alguma maneira, os valores aceitos são: "off", "sentences", "on", "words" ou "characters" Example:
<Input autoCapitalize="on" />
Optional autoIndica se o input deve receber foco automaticamente. Example:
<Input autoFocus={true} />
Optional autocompleteControla o preenchimento automático de campos de input com valores previamente inseridos pelo usuário. Example:
<Input
autocomplete="username"
/>
Optional autofocusQuando definido como true, o campo de input receberá o foco automaticamente quando a página for carregada. Example:
<Input
autofocus={true}
/>
Optional backgroundBackground color of component
Check the token table to know which values to use
Example:
<backgroundColor="background-color" />
Optional borderborderColor sets the color of borders in the design system, allowing you to control the visual appearance of elements' outlines.
Check the token table to know which values to use
Example:
<borderColor="neutral-900" />
Optional borderDefines the border style of a component. You need to define borderWidth before use this property.
Example:
<View borderWidth="hairline" borderStyle="dashed" />
Optional borderborderBottomWidth focuses on adjusting the thickness of the bottom border in the design system, allowing you to fine-tune the visual appearance of the bottom border for elements.
Check the token table to know which values to use
Example:
<borderBottomWidth="hairline" />
Optional borderBorder Color of component
Check the token table to know which values to use
Example:
<borderColor="neutral-900" />
Optional borderRemoves the borders of the input. Example:
<MaskInput borderHidden={true}/>
Optional borderDefines the border style of a component. You need to define borderWidth before use this property.
Example:
<View borderWidth="hairline" borderStyle="dashed" />
Optional borderborderBottomWidth is used to control the thickness of the bottom border in the design system, giving you control over the visual appearance of the bottom edges of elements.
Check the token table to know which values to use
Example:
<borderBottomWidth="hairline" />
Optional borderborderRadius defines the roundness or curvature of corners in the design system, allowing you to create different shapes and styles for elements by adjusting this property.
Check the token table to know which values to use
Example:
<borderRadius="micro" />
Optional borderborderRadiusLeftBottom defines the roundness or curvature of corners in the design system, allowing you to create different shapes and styles for elements by adjusting this property.
Check the token table to know which values to use
Example:
<borderRadiusLeftBottom="micro" />
Optional borderborderRadiusLeftTop defines the roundness or curvature of corners in the design system, allowing you to create different shapes and styles for elements by adjusting this property.
Check the token table to know which values to use
Example:
<borderRadiusLeftTop="micro" />
Optional borderborderRadiusRightBottom defines the roundness or curvature of corners in the design system, allowing you to create different shapes and styles for elements by adjusting this property.
Check the token table to know which values to use
Example:
<borderRadiusRightBottom="micro" />
Optional borderborderRadiusRightTop defines the roundness or curvature of corners in the design system, allowing you to create different shapes and styles for elements by adjusting this property.
Check the token table to know which values to use
Example:
<borderRadiusRightTop="micro" />
Optional borderDefines the border style of a component. You need to define borderWidth before use this property.
Example:
<View borderWidth="hairline" borderStyle="dashed" />
Optional borderborderRightWidth is used to control the thickness of the right border in the design system, giving you control over the visual appearance of the right edges of elements.
Check the token table to know which values to use
Example:
<borderRightWidth="hairline" />
Optional borderDefines the border style of a component. You need to define borderWidth before use this property.
Example:
<View borderWidth="hairline" borderStyle="dashed" />
Optional borderDefines the border style of a component. You need to define borderWidth before use this property.
Example:
<View borderWidth="hairline" borderStyle="dashed" />
Optional borderborderTopWidth specifically adjusts the thickness of the top border in the design system, giving you precise control over the visual aspect of the top border of elements.
Check the token table to know which values to use
Example:
<borderTopWidth="hairline" />
Optional borderThe borderWidth determines the thickness of borders in the design system.
It's a crucial property for defining the visual weight of elements.
Check the token table to know which values to use
Example:
<borderWidth="hairline" />
Optional colorText color of components
Check the token table to know which values to use
Example:
<color="neutral-900" />
Optional content"Use contrast colors for text and background"
Example:
<View contentColors backgroundColor="primary-500" />
Optional disabledIndica se o input está desabilitado. Example:
<Input disabled={true} />
Optional disabledIndica se o buttonSearch está desabilitado. Ele estará visível, mas não será possível utilizar. Example:
<Input disabledBtnSearch="text" />
Optional displayChanges the element exhibition
Example:
<display="flex"/>
Optional heightAdjust component height
Example:
<height={100} />
Optional id"Fills the ID of the element (not very practical)."
Example:
<View id="id" />
Optional inputO atributo inputMode especifica o tipo de entrada esperada em um campo de texto.
Ele pode ser usado para sugerir ao navegador o teclado virtual apropriado para exibição em dispositivos móveis.
Valores aceitos:
text: Entrada de texto normal.email: Endereços de e-mail.numeric: Entrada numérica.decimal: Entrada numérica com dízimas.tel: Números de telefone.url: URLs.search: Termos de pesquisa.Example:
<Input inputMode="text" />
Valores aceitos para máscara de input.
Uma máscara de input é um formato pré-definido que permite controlar e validar a entrada de dados em um campo de input. A máscara define a estrutura esperada para o valor do input, indicando, por exemplo, onde devem ser inseridos dígitos numéricos, caracteres especiais ou espaços.
Para representar dígitos numéricos, utilize o caractere "9" na máscara. Os dígitos serão preenchidos conforme a entrada do usuário.
Exemplos de máscaras comumente utilizadas incluem CPF, CNPJ, telefone, CEP, entre outros.
// Máscara com CPF
<Input mask="999.999.999-99" />
// Máscara com CNPJ
<Input mask="99.999.999/9999-99" />
Você pode utilizar também duas máscaras ao mesmo tempo, sendo que a prioridade é a máscara de menor tamanho, quando o tamanho do texto digitado for maior que a máscara atual e ainda houver outra na lista de tamanho maior, ele selecionará automaticamente.
<Input mask={["999.999.999-99", "99.999.999/9999-99"]} />
Optional maxDefine o valor máximo permitido em campos de input do tipo "number". Example:
<Input
type="number"
max={100}
/>
Optional maxAdjust component maximum height
Example:
<maxHeight={100} />
Optional maxO limite de caracteres do input Example:
<Input maxLength={10}/>
Optional maxAdjust component maximum width
Example:
<maxwidth={100} />
Optional minDefine o valor mínimo permitido em campos de input do tipo "number". Example:
<Input
type="number"
min={0}
/>
Optional minAdjust component minimum height
Example:
<minHeight={100} />
Optional minQuando definido como true, o checkbox será exibido como marcado por padrão. Example:
<Input
minLength={6}
/>
Optional minAdjust component minimum width
Example:
<minWidth={100} />
Optional multipleQuando definido como true em campos de input do tipo "file", permite que os usuários selecionem vários arquivos para upload. Example:
<Input
multiple={20}
/>
Optional nameDefine o atributo name do elemento de input. Esse atributo é frequentemente usado em formulários para identificar os campos quando os dados são enviados. Example:
<Input
name="username"
/>
Optional nextUse esta propriedade para passar o ID do próximo input para dar focus quando o cliente submeter o input
Optional onFunção chamada quando o input perde o foco. Example:
<Input onBlur={this.myFuncion}/>
O valor do input.
Função chamada quando o valor do input é alterado. Example:
<Input onChange={this.myFuncion}/>
O valor do input.
Optional oncall a function when clear button is pressed Example:
<Input onClear={() => { }}/>
Optional onFunção chamada quando o input ganha o foco. Example:
<Input onFocus={this.myFuncion}/>
O valor do input.
Optional onFunção que será executada ao apertar o botão de busca do input Example:
<Input
type="search"
onSearchButtonPress={() => console.log("search")}
/>
Optional onFunção chamada quando o input ganha é submetido. Example:
<Input onFocus={this.myFuncion}/>
O valor do input.
Optional opacityChanges the element opacity
Example:
<opacity="light" />
Optional patternEspecifica uma expressão regular que o valor do campo de input deve corresponder para ser considerado válido. Example:
<Input
pattern="[A-Za-z]+"
/>
Optional placeholderA dica ou instrução breve para o usuário sobre o valor esperado no campo de entrada. Example:
<Input placeholder="text" />
Optional readonlyDefine se o campo de input é somente leitura. Quando definido como true, os usuários não poderão editar o conteúdo do campo. Example:
<Input
readonly={true}
/>
Optional requiredIndica se o campo de input é obrigatório. Se definido como true, um aviso será exibido se o usuário tentar enviar o formulário sem preencher este campo. Example:
<Input
required={true}
/>
Optional searchVariantes visuais do input Example:
<Input
type="search"
searchButtonVariant="ghost"
/>
Optional showIndica se o botão que limpa o input está visível. Example:
<Input
type="search"
showClearInput={false}
/>
Optional showExibe o botão de busca
Você pode utilizar um type="search" e mesmo assim não mostrar o botão de pesquisa utilizando showSearchButton={false}
O valor padrão é false, mas quando type=search o valor padrão é true.
Example:
<Input
type="search"
showSearchButton={false}
/>
Optional sizeEspecifica a largura visual do campo de input, geralmente em caracteres ou pixels, dependendo da implementação. Example:
<Input
size={20}
/>
Optional spellcheckDetermina se o corretor ortográfico do navegador deve verificar o conteúdo do campo de input. Example:
<Input
spellcheck={true}
/>
Optional stepEspecifica a largura visual do campo de input, geralmente em caracteres ou pixels, dependendo da implementação. Example:
<Input
type="number"
step={0.5}
/>
Optional transform"Prepare a position transforming of element"
Example:
<View transform="rotate(45deg)" />
Optional transition"Prepare a transition of visual state change"
Example:
<View transition="background-color 0.5s ease-in-out" />
Optional typeO tipo de input. Valores aceitos: "text", "number", "password", "email", "file", "search" Example:
<Input type="text" />
Optional valueO valor atual do input. Example:
<Input value="text" />
Optional visibilityChanges the element visibility
Example:
<visibility="visible" />
Optional visual"Determines the visual state of the component and its children."
Example:
<View visualState="success" />
Optional widthAdjust component width
Example:
<width={100} />
Set of properties for MaskedInput.