Pular para o conteúdo
Ajude a traduzir esta página

Text Field (campo de texto)

Campos de texto permitem que os usuários digitem e editem texto.

Campos de texto permitem que os usuários insiram texto em uma interface de usuário. Eles geralmente aparecem em formulários e diálogos.

TextField

O componente wrapper TextField é um controle de formulário completo, incluindo um rótulo, entrada e texto de ajuda.

O TextField suporta 3 variações: O estilo padrão, com contorno e preenchido.

<form className={classes.root} noValidate autoComplete="off">
  <TextField id="standard-basic" label="Standard" />
  <TextField id="filled-basic" label="Filled" variant="filled" />
  <TextField id="outlined-basic" label="Outlined" variant="outlined" />
</form>

Observação: A variante padrão do TextField não é mais documentada em Material Design guidelines (entenda o porque).

Form props

Os atributos são suportados pelo TextField, como por exemplo required, disabled, type, etc. assim como o helperText que é utilizada para dar contexto sobre um campo de entrada, tais como, a entrada que será usada.

Some important text

Some important text

Some important text

Validation

A propriedade error habilita o estado de erro, e, utilizando a propriedade helperText será fornecido um "feedback" ao usuário sobre o erro.

Incorrect entry.

Incorrect entry.

Incorrect entry.

Multiline

A propriedade multiline transforma o textfield em um `TextArea.

{{"demo": "pages/components/text-fields/MultilineTextFields.js"}}

Seleção

A propriedade select` transforma o `textfield` em um componente [Select](/components/selects/).

€

Please select your currency

Please select your currency

€

Please select your currency

Please select your currency

€

Please select your currency

Please select your currency

Ícones

Há muitas formas de incluir um icone em um textfield.

Decoração de inputs

A forma principal é utilizando um InputAdornment. This can be used to add a prefix, a suffix or an action to an input. Por exemplo, você pode usar um botão com ícone para ocultar ou revelar a senha.

Kg

Kg

Weight

$

Kg

Kg

Weight

$

Kg

Kg

Weight

$

Tamanhos

Gosta mais de campos de texto menores? Use a propriedade size.

Leiaute

margin prop can be used to alter the vertical spacing of inputs. Using none (default) will not apply margins to the FormControl, whereas dense and normal will. dense and normal alter other styles to meet the specification.

fullWidth can be used to make the input take up the full width of its container.

Full width!

Some important text

Some important text

Some important text

Full width!

Some important text

Some important text

Some important text

Full width!

Some important text

Some important text

Some important text

Uncontrolled vs Controlled

The component can be controlled or uncontrolled.

Componentes

TextField é composto por componentes menores (FormControl, Input, FilledInput, InputLabel, OutlinedInput, e FormHelperText) que você pode aproveitar diretamente para personalizar significativamente as entradas do seu formulário.

Você também pode ter notado que algumas propriedades de entrada nativas do HTML estão faltando no componente TextField. Isto é intencional. O componente cuida das propriedades mais usadas, depois cabe ao usuário usar o componente exibido na demonstração. Ainda, você pode usar inputProps (InputProps e InputLabelProps) se você quiser evitar algum boilerplate.

Some important helper text

Disabled

Error

Entradas

<form className={classes.root} noValidate autoComplete="off">
  <Input defaultValue="Hello world" inputProps={{ 'aria-label': 'description' }} />
  <Input placeholder="Placeholder" inputProps={{ 'aria-label': 'description' }} />
  <Input defaultValue="Disabled" disabled inputProps={{ 'aria-label': 'description' }} />
  <Input defaultValue="Error" error inputProps={{ 'aria-label': 'description' }} />
</form>

Cor

The color prop changes the highlight color of the text field when focused.

<form className={classes.root} noValidate autoComplete="off">
  <TextField id="standard-secondary" label="Standard secondary" color="secondary" />
  <TextField
    id="filled-secondary"
    label="Filled secondary"
    variant="filled"
    color="secondary"
  />
  <TextField
    id="outlined-secondary"
    label="Outlined secondary"
    variant="outlined"
    color="secondary"
  />
</form>

Inputs Costumizados

Aqui estão alguns exemplos de customização do componente. Você pode aprender mais sobre isso na página de documentação de sobrescritas.

A customização não para no CSS, você pode usar composição para criar componentes personalizados e dar ao seu aplicativo uma sensação única. Abaixo há um exemplo usando o componente InputBase, inspirado pelo Google Maps.

👑 Se você está procurando inspiração, você pode verificar os exemplos de customização de MUI Treasury.

Limitações

Reduzir

O label de entrada "shrink" nem sempre está correto. O input label deve encolher assim que o input estiver exibindo algo. Em algumas circunstâncias, não podemos determinar o estado de "srink" (input numérico, input datetime, input Stripe). Você pode notar uma sobreposição.

minimizar

Para contornar o problema, você pode forçar a "shrink" do label.

<TextField InputLabelProps={{ shrink: true }} />

ou

<InputLabel shrink>Contagem</InputLabel>

Rótulo flutuante

O rótulo flutuante está absolutamente posicionado, não afetará o leiaute da página. Você precisa ter certeza de que o componente de entrada é maior do que o rótulo para a exibição correta.

Integração com bibliotecas de input de terceiros

Você pode usar bibliotecas de terceiros para formatar uma entrada. Você precisa fornecer uma implementação personalizada do elemento <input> com a propriedade inputComponent.

A seguinte demonstração usa as bibliotecas react-text-mask e react-number-format. O mesmo conceito pode ser aplicado para, p. ex. react-stripe-element.

O componente de entrada fornecido deve manipular a propriedade inputRef. A propriedade deve ser chamada com um valor que implemente a seguinte interface:

interface InputElement {
  focus(): void;
  value?: string;
}
function MeuInputComponente(props) {
  const { component: Component, inputRef, ...other } = props;

  // implementa a interface `InputElement`
  React.useImperativeHandle(inputRef, () => ({
    focus: () => {
      // logica para focar o componente renderizado de terceiros entra aquito focus
    },
    // ocultando o valor p.ex. react-stripe-elements
  }));

  // O `Component` abaixo será seu `AlgumComponentDeTerceiro`
  return <Component {...other} />;
}

// uso
<TextField
  InputProps={{
    inputComponent: MeuInputComponente,
    inputProps: { component: AlgumComponentDeTerceiro },
  }}
/>;

Acessibilidade

Para que o campo de texto seja acessível, a entrada deve estar vinculada ao rótulo e ao texto auxiliar. Os nós DOM subjacentes devem ter essa estrutura:

<div class="form-control">
  <label for="my-input">Endereço de e-mail</label>
  <input id="my-input" aria-describedby="my-helper-text" />
  <span id="my-helper-text">Nós nunca compartilharemos seu e-mail.</span>
</div>
  • Se você estiver usando o componente TextField, basta fornecer um id único.
  • Se você está compondo o componente:
<div class="form-control">
  <label for="my-input">Endereço de e-mail</label>
  <input id="my-input" aria-describedby="my-helper-text" />
  <span id="my-helper-text">Nós nunca compartilharemos seu e-mail.</span>
</div>

Projetos Complementares

Para usos mais avançados, você pode tirar vantagem com:

API