TextField

TextField renderiza un <input type="text"> de una sola línea dentro de un contenedor estilizado. Es el campo más usado en formularios. Atributos nativos adicionales del input pueden reenviarse via rest-props spread.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | value | string | Sí | — | Valor de texto actual. | | onChange | (value: string) => void | Sí | — | Llamado con la nueva cadena en cada tecla presionada. | | label | string | No | — | Etiqueta mostrada sobre el input. | | description | string | No | — | Texto de ayuda mostrado debajo del input. | | placeholder | string | No | — | Texto placeholder mostrado dentro del input cuando está vacío. | | disabled | boolean | No | — | Deshabilita el input. | | containerStyle | React.CSSProperties | No | — | Estilos del div contenedor raíz. | | inputWrapperStyle | React.CSSProperties | No | — | Estilos del div wrapper interior que rodea al <input>. | | inputStyle | React.CSSProperties | No | — | Estilos aplicados directamente al elemento <input>. | | labelStyle | React.CSSProperties | No | — | Estilos del elemento de etiqueta. | | descriptionStyle | React.CSSProperties | No | — | Estilos del párrafo de descripción. | | className | string | No | — | Clase CSS del div wrapper interior. | | id | string | No | — | Atributo id del <input>. |

Uso

Básico

import React, { useState } from 'react';
import TextField from '@/components/fields/TextField';

export default function Example() {
  const [name, setName] = useState('');

  return (
    <TextField
      label="Nombre completo"
      value={name}
      onChange={setName}
      placeholder="Ingresá tu nombre completo"
    />
  );
}

Campo deshabilitado con descripción

<TextField
  label="Nombre de usuario"
  value={username}
  onChange={setUsername}
  disabled={true}
  description="El nombre de usuario no puede cambiarse una vez establecido."
/>