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.

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

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.

Propriedades de formulário

Standard form attributes are supported e.g. required, disabled, type, etc. as well as a helperText which is used to give context about a field’s input, such as how the input will be used.

Validação

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

Multilinha

A propriedade multiline transforma o textfield em um <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea">TextArea</a>. Unless therowsprop is set, the height of the text field dynamically matches its content (using [TextareaAutosize](/components/textarea-autosize/)). You can use therowsMinandrowsMax` props to bound it.

Seleção

A propriedade select faz com que o campo de texto use internamente um componente Select.

Ícones

Há muitas formas de incluir um ícone com um campo de texto.

Adereços de campo

A forma principal é utilizando um componente InputAdornment. Estes podem ser usados para adicionar um prefixo, sufixo ou uma ação para um campo. Por exemplo, você pode usar um botão com ícone para ocultar ou revelar a senha.

Tamanhos

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

Leiaute

A propriedade margin pode ser utilizada para alterar o espaçamento vertical dos campos. Usar none (padrão) não aplicará margens para o FormControl, enquanto dense e normal irá. As definições dense e normal altera outros estilos para atender a especificação.

A propriedade fullWidth pode ser usada para fazer com que o campo ocupe a largura total de seu contêiner.

Não controlado vs controlado

O componente pode ser controlado ou não controlado.

Componentes

O componente TextField é composto por componentes menores (FormControl, Input, FilledInput, InputLabel, OutlinedInput, e FormHelperText) que você pode aproveitar diretamente para customizar significativamente os campos do seu formulário.

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

Campos

Cor

A propriedade color altera a cor do destaque do campo de texto quando focado.

Campos customizados

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 customizados 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

Shrink

O rótulo do campo no estado de "shrink"(recuo) nem sempre está correto. O rótulo do campo deve recuar assim que o campo estiver exibindo algo. Em algumas circunstâncias, não podemos determinar o estado de "shrink" (input numérico, input datetime, input Stripe). Você pode notar uma sobreposição.

Para contornar o problema, você pode forçar o "shrink" do rótulo.

<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 campo é maior do que o rótulo para a exibição correta.

type="number"

Inputs of type="number" have potential usability issues:

• Allowing certain non-numeric characters ('e', '+', '-', '.') and silently discarding others and silently discarding others
• Se você está compondo o componente:

and more - see this article by the GOV.UK Design System team for a more detailed explanation.

For number validation, one viable alternative is to use the default input type="text" with the pattern attribute, for example:

<TextField inputProps={{ inputMode: 'numeric', pattern: '[0-9]*' }} />

In the future, we might provide a number input component.

Helper text

The helper text prop affects the height of the text field. If two text fields are placed side by side, one with a helper text and one without, they will have different heights. Por exemplo:

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

This can be fixed by passing a space character to the helperText prop:

Integração com bibliotecas de campo de terceiros

Você pode usar bibliotecas de terceiros para formatar um campo. 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.

The provided input component should expose a ref with a value that implements the following interface:

interface InputElement {
  focus(): void;
  value?: string;
}

const MyInputComponent = React.forwardRef((props, ref) => {
  const { component: Component, ...other } = props;

  // implement `InputElement` interface
  React.useImperativeHandle(ref, () => ({
    focus: () => {
      // logic to focus the rendered component from 3rd party belongs here
    },
    // hiding the value e.g. react-stripe-elements
  }));

  // `Component` will be your `SomeThirdPartyComponent` from below
  return <Component {...other} />;
});

// usage
<TextField
  InputProps={{
    inputComponent: MyInputComponent,
    inputProps: {
      component: SomeThirdPartyComponent,
    },
  }}
/>;

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" mark="crwd-mark">
  <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 situações de uso mais avançadas, você pode tirar proveito com:

• react-hook-form: React hook for form validation.
• formik-material-ui: Bindings for using Material-UI with formik.
• redux-form-material-ui: Bindings for using Material-UI with Redux Form.
• mui-rff: Bindings for using Material-UI with React Final Form.

API

• <FilledInput />
• <FormControl />
• <FormHelperText />
• <Input />
• <InputAdornment />
• <InputBase />
• <InputLabel />
• <OutlinedInput />
• <TextField />