Todos los componentes (204)

Campo de texto

Campos · TextField · .amset-field

Qué es y cuándo usarlo

El campo de una línea, con etiqueta, ayuda y error ya cableados: el propio campo pone el for/id y el aria-describedby, así que no hay forma de montarlo sin relación accesible entre las partes. Por dentro es un <input> nativo.

Cuándo usarlo

Nombres, correos, referencias: cualquier texto corto. Con type="email", tel o url, el móvil saca el teclado que toca.
front y back para un icono, un prefijo o una unidad dentro de la caja.
numeric para cifras que tienen que cuadrar en columna (referencias, NIF, fechas escritas).
readOnly para un dato que se puede copiar pero no cambiar: el borde pasa a discontinuo.
inputRef para llegar al <input> de verdad (darle el foco, medirlo), no a la caja.

Cuándo no

Un número que se suma o tiene mínimo y máximo: NumberField.
Más de una línea: TextArea. Una contraseña: PasswordField.
Un NIF, un IBAN, un teléfono o una tarjeta: DocumentField, IbanField, PhoneField o CardField, que además los comprueban.
Elegir de una lista larga: SearchField.

Teclado: Tab llega al campo y se escribe como en cualquier entrada. Deshabilitado sale del orden del Tab; en solo lectura se sigue pudiendo enfocar y copiar.

Accesibilidad: la etiqueta es obligatoria; con hiddenLabel solo la oye el lector de pantalla, para cuando lo de alrededor ya lo explica. La ayuda y el error se leen como descripción del campo. El asterisco de obligatorio no entra en el nombre: se dice con aria-required. Con el dedo, la caja pasa a 48 px y la letra a 16 px, para que el iPhone no amplíe la página.

Aspecto fino: variables CSS --amset-field-height, -padding, -font, -label, -description, -radius, -background y -border.

Cómo se ve

Nombre y apellidos

Como aparece en el documento

Correo

Ese correo ya está dado de alta

<TextField label="Nombre y apellidos" placeholder="Ada Lovelace" hint="Como aparece en el documento" />
<TextField label="Correo" type="email" error="Ese correo ya esta dado de alta" />

Props

Se importa con import { TextField } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	Obligatoria: un campo sin etiqueta visible no entra en la libreria.
`back`	`ReactNode`	Contenido detras del texto: una unidad ("€"), un boton de copiar.
`className`	`string`	—
`defaultValue`	`string`	—
`disabled`	`boolean`	—
`error`	`string`	Mensaje de error. Al pasarlo, el campo queda marcado como invalido.
`front`	`ReactNode`	Contenido delante del texto: un icono, un prefijo ("+34").
`hiddenLabel`	`boolean`	La etiqueta solo para el lector de pantalla. Para cuando el campo va dentro de algo que ya se explica solo (el buscador de un grupo de filtros), nunca para ahorrar espacio.
`hint`	`string`	Texto de ayuda permanente bajo el campo. No sustituye a la etiqueta.
`inputRef`	`Ref<HTMLInputElement>`	El `<input>` de verdad, para enfocarlo, seleccionar su texto o medirlo desde fuera. Va aparte del `ref` porque el componente pinta una caja con etiqueta, ayuda y error, y quien pide un ref casi siempre quiere el control.
`invalid`	`boolean`	—
`numeric`	`boolean`	Cifras con ancho fijo (importes, NIF, fechas).
`onChange`	`(value: string) => void`	—
`onChangeEvent`	`(event: ChangeEvent<HTMLInputElement>) => void`	Como `onChange`, pero con el evento nativo del `<input>`: `e.target.value`, `e.currentTarget`... Existe para migrar un front que ya escribe sus manejadores con el evento (AMS-735). Si solo quieres el texto, `onChange` lo entrega ya.
`placeholder`	`string`	—
`readOnly`	`boolean`	—
`required`	`boolean`	—
`size`	`"sm" \| "md" \| "lg"`	—
`validationBehavior`	`"aria" \| "native"`	`aria` (por defecto) anuncia el estado sin que el navegador interrumpa el envio con su globo; `native` añade ademas su validacion.
`value`	`string`	—
`variant`	`FieldVariant`	—

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-field-height`	`var(--amset-height-control)`
`--amset-field-padding`	`var(--amset-space-3)`
`--amset-field-font`	`var(--amset-text-base)`
`--amset-field-label`	`var(--amset-text-sm)`
`--amset-field-description`	`var(--amset-text-sm)`
`--amset-field-radius`	`var(--amset-radius)`
`--amset-field-background`	`var(--amset-surface)`
`--amset-field-border`	`var(--amset-border-bold)`
`--amset-field-family`	`var(--amset-font)`
`--amset-field-shadow`	`var(--amset-shadow-1)`
`--amset-field-gap`	`var(--amset-space-1)`
`--amset-field-label-line`	`var(--amset-line-tight)`
`--amset-field-ink`	`var(--amset-ink)`
`--amset-field-label-color`	`inherit`
`--amset-field-label-family`	`inherit`
`--amset-field-label-weight`	`var(--amset-weight-medium)`
`--amset-field-label-transform`	`none`
`--amset-field-label-spacing`	`normal`
`--amset-field-required-display`	`inline`
`--amset-field-focus-shadow`	`0 0 0 1px var(--amset-focus)`

Cómo se cambia

.amset-field {
  --amset-field-height: ...;
  --amset-field-padding: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: