Saltar al contenido

馃帀 Material UI v5 is out! Head to the migration guide to get started.

Text Field (campo de texto)

Los campos de texto permiten a los usuarios ingresar y editar texto.

Text fields permiten al usuario ingresar un texto en una UI. Generalmente se encuentran en formularios y di谩logos.

TextField

El componente TextField es un control de formulario completo, incluyendo una etiqueta, el campo de texto y texto de ayuda.

Soporta estilos "Standard", "Outlined" y "Filled".

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

Nota: La variante est谩ndar de TextField no esta mas documentada en gu铆a Material Design (Aqu铆 esta el por que), pero Material-UI continuara soport谩ndolo.

Propiedades del Form

Para ello, hay que proporcionar una implementaci贸n personalizada del elemento <input> con el atributo inputComponent. Se pueden utilizar librer铆as externas para formatear un campo de texto.

Some important text

Some important text

Some important text

Validaci贸n

The error prop toggles the error state, the helperText prop can then be used to provide feedback to the user about the error.

Incorrect entry.

Incorrect entry.

Incorrect entry.

Multiline

The multiline prop transforms the text field into a textarea or a TextareaAutosize.

Selecci贸n

The select prop makes the text field use the Select component internally.

Please select your currency

Please select your currency

Please select your currency

Please select your currency

Please select your currency

Please select your currency

Iconos

There are multiple ways to display an icon with a text field.

Adornos de campos de texto

The main way is with an InputAdornment. Por ejemplo, puedes usar un bot贸n de icono para esconder o revelar una contrase帽a. This can be used to add a prefix, a suffix or an action to an input.

Kg

Kg

Weight

$

Kg

Kg

Weight

$

Kg

Kg

Weight

$

Tama帽os

Fancy smaller inputs? Use the size prop.

Disposici贸n

dense and normal alter other styles to meet the specification. 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.

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

El componente TextField incluye y usa subcomponentes ( FormControl, Input, FilledInput, InputLabel, OutlinedInput y FormHelperText ) que pueden ser usados directamente para personalizar campos de ingreso de texto de manera sustancial.

Puede que tambi茅n hayas notado que algunas propiedades nativas de input HTML no est谩n presentes en el componente TextField. Esto es a prop贸sito. El componente se encarga de programar la mayor铆a de las propiedades m谩s usadas, luego depende del usuario programar las propiedades que se muestran en la siguiente demo. Aun as铆, se puede utilizar inputProps (y las propiedades InputProps e InputLabelProps) para personalizar y evitar el c贸digo boilerplate.

Some important helper text

Disabled

Error

Inputs

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

Color

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 personalizados

Here are some examples of customizing the component. You can learn more about this in the overrides documentation page.

La personalizaci贸n no se limita a usar CSS, tambi茅n puedes usar una composici贸n de componentes personalizados para darle a tu aplicaci贸n un estilo 煤nico. A continuaci贸n sigue un ejemplo del uso del componente InputBase, inspirado por Google Maps.


馃帹 Si buscas un poco de inspiraci贸n, puedes visitar MUI Treasury's ejemplos de customizacion.

Limitaciones

Shrink

El estado "shrink" de la etiqueta del campo de texto no est谩 siempre correcto. La etiqueta debe achicarse al momento que el campo demuestra algun texto. En algunas circunstancias, no se puede determinar el estado "shrink" (campo de n煤meros, campo de fecha y hora, campo de Stripe). Tal vez veas una superposici贸n.

shrink

Para resolver el problema, puedes forzar el estado "shrink" de la etiqueta.

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

o

<InputLabel shrink>Contagem</InputLabel>

Floating label

The floating label is absolutely positioned, it won't impact the layout of the page. You need to make sure that the input is larger than the label to display correctly.

Integration with 3rd party input libraries

Se pueden utilizar librer铆as externas para formatear un campo de texto. Para ello, hay que proporcionar una implementaci贸n personalizada del elemento <input> con el atributo inputComponent.

El siguiente demo utiliza las librer铆as react-text-mask y react-number-format. The same concept could be applied to e.g. react-stripe-element.

El componente del campo de texto proporcionado debe manejar el atributo inputRef. The property should be called with a value that implements the following interface:

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

  // implement `InputElement` interface
  React.useImperativeHandle(inputRef, () => ({
    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 },
  }}
/>;

Accesibilidad

In order for the text field to be accessible, the input should be linked to the label and the helper text. The underlying DOM nodes should have this structure:

<div class="form-control">
  <label for="mi-campo">Email</label>
  <input id="mi-campo" aria-describedby="mi-texto-de-ayuda" />
  <span id="mi-texto-de-ayuda">Nunca compartiremos tu email.</span>
</div>
  • Si se usa el componente TextField, s贸lo hay que proporcionar un id 煤nico.
  • Si se est谩 componiendo el componente:
<FormControl>
  <InputLabel htmlFor="mi-campo">Email</InputLabel>
  <Input id="mi-campo" aria-describedby="mi-texto-de-ayuda" />
  <FormHelperText id="mi-texto-de-ayuda">Nunca compartiremos tu email.</FormHelperText>
</FormControl>

Proyectos relacionados

Para usos m谩s avanzados tal vez puedas aprovercharte de: