Todos los componentes (204)

Grupo de entrada

Campos · InputGroup

Qué es y cuándo usarlo

Un campo con segmentos pegados: https:// + el dominio + .com, un importe con su moneda delante, un código con su botón de copiar detrás. Es una sola caja -un borde, un anillo de foco, un error- con el campo en medio y cada segmento con su fondo, separado por una raya.

Cuándo usarlo

Cuando lo que rodea al campo forma parte de lo que se escribe pero no del valor: un prefijo, una unidad, una acción que opera sobre él.
Para un botón que actúa sobre el campo (copiar, pegar, generar) y debe verse como parte suya.

Cuándo no

Para un adorno dentro del campo (una lupa, una unidad pequeña): es front o back de TextField.
Para dos controles independientes que se tocan: es CompactGroup.
Para la caja de un chat: es PromptInput.

Teclado: es un solo campo; Tab pasa del segmento con un botón al campo y de vuelta, en el orden en que se ven. Pulsar la etiqueta enfoca el campo.

Accesibilidad: lleva todo lo de TextField: la etiqueta es obligatoria, la ayuda y el error se enlazan con aria-describedby y el error marca el campo como inválido. El value es solo lo que se escribe: los segmentos no se mezclan con él. Un segmento de texto es contenido de la caja y se lee con ella; si lo que hay dentro es un botón, necesita su propio nombre.

Aspecto fino: variable CSS --amset-inputgroup-addon-background (el fondo de los segmentos), además de las --amset-field-* de la caja.

Cómo se ve

Dirección de tu tienda

https://.tienda.example

Solo letras minúsculas, números y guiones.

Precio

€IVA incl.

<InputGroup
  label="Dirección de tu tienda"
  start="https://"
  end=".tienda.example"
  placeholder="joyeria-aurelia"
  hint="Solo letras minúsculas, números y guiones."
/>
<InputGroup label="Precio" start="€" end="IVA incl." placeholder="0,00" numeric />

Props

Se importa con import { InputGroup } 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.
`className`	`string`	—
`defaultValue`	`string`	—
`disabled`	`boolean`	—
`end`	`ReactNode`	Un segmento DESPUÉS del campo: «.com», «kg», un botón de copiar.
`error`	`string`	Mensaje de error. Al pasarlo, el campo queda marcado como invalido.
`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"`	—
`start`	`ReactNode`	Un segmento ANTES del campo, con su fondo y su raya: «https://», una moneda, un selector. Es parte de la caja y de su anillo de foco, pero no del texto: el `value` es solo lo que se escribe.
`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.

En el banco de pruebas

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