TextField

Os TextFields são caixas de texto que permitem às pessoas inserirem conteúdo textual personalizado com um teclado.

O PatternField e NumericField são TextFields que permitem formatações específicas, como máscaras e decimais.

Playground

Propriedades

Nome (* = obrigatório)

Tipo

Valores

Descrição

addonBefore

ReactNode

  • -

Elemento inserido antes do campo de texto. Geralmente é um ícone.

addonAfter

ReactNode

  • -

Elemento inserido depois do campo de texto. Geralmente é um ícone.

customProps

{ label?: ComponentPropsWithRef<'label'>; input?: ComponentPropsWithRef<'input'>; inputWrapper?: ComponentPropsWithRef<'div'>; }

    Adiciona propriedades específicas para elementos filhos.

    defaultValue

    string

    • -

    Valor definido inicialmente ao campo

    disabled

    boolean

    • false (default)

    • true

    Se true previne que os usuários interajam com o campo de texto.

    error

    boolean

    • false (default)

    • true

    Se true adiciona o estilo de erro no campo de texto.

    fullWidth

    TextFieldFullWidth

    • false (default)

    • true

    • always

    • sm-up

    • sm-down

    • md-up

    • md-down

    • lg-up

    • lg-down

    • xl-up

    • xl-down

    • xxl-up

    • xxl-down

    Se true ou always o campo de texto ocupa todo o espaço disponível. Use por breakpoint quando você quiser controlar quando o campo deve ocupar todo o espaço, por exemplo:sm-up ou sm-down para o campo de texto ocupar todo o espaço disponível apenas quando a tela tem um tamanho menor ou maior que sm.

    helperText

    ReactNode

    • -

    Texto auxiliar que aparece abaixo do campo de texto adicionando maiores informações sobre o campo.

    id *

    string

    • -

    Propriedade ID do HTML. Vincula informações adicionais aos elementos melhorando acessibilidade.

    label

    string

    • -

    Label para descrever o campo de texto

    name

    string

    • -

    Nome do campo do elemento, usado no envio do formulário HTML.

    placeholder

    string

    • -

    Texto de exemplo do campo.

    readOnly

    boolean

    • false (default)

    • true

    Se true previne que os usuários editem o valor do campo de texto.

    required

    boolean

    • false (default)

    • true

    Se true seu valor deve ser preenchido para submeter o formulário.

    type

    TextFieldType

    • text (default)

    • password

    • email

    • number

    • search

    • tel

    • url

    • date

    • datetime-local

    • time

    Propriedade type do HTML atribuída ao input.

    value

    string

    • -

    Valor enviado através do nome do campo de formulário.

    Métodos

    Nome (* = obrigatório)

    Tipo

    Descrição

    onBlur

    function

    Função chamada quando o componente perde o foco.

    event é o objeto de evento do change.

    onChange

    function

    Função chamada quando o valor é alterado.

    event é o objeto de evento do change.

    PatternField

    Nome (* = obrigatório)

    Tipo

    Valores

    Descrição

    allowEmptyFormatting

    boolean

    • true

    • false (default)

    Define se aplica a formatação quando o valor for vazio(null,undefined ou '') no PatternField.

    format *

    string

    • #

    Define o formato utilizando # como um placeholder dos caraters dos numéros no PatternField.

    NumericField

    Nome (* = obrigatório)

    Tipo

    Valores

    Descrição

    allowNegative

    boolean

    • true

    • false (default)

    Define se números negativos serão permitidos no NumericField.

    allowLeadingZeros

    boolean

    • true

    • false (default)

    Define se podem existir zeros à esquerda no NumericField. Quando false, os zeros à esquerda são removidos no blur.

    decimalScale

    number

    • 2 (default)

    Define o número de dígitos depois do ponto decimal no NumericField.

    decimalSeparator

    string

    • , (default)

    Define o caractere separador de decimal no NumericField.

    thousandSeparator

    string

    • . (default)

    Define o caractere separador de milhares no NumericField.

    isAllowed

    function

      Função chamada para validar o valor do input do NumericField. Se o valor desse método retornar false, o método de onChange não será invocado e o valor do input não será modificado.