Campo de color

Descripción general

link

Web

tanrei-color-field

schedule

SwiftUI

TanreiColorField

radio_button_unchecked

Jetpack Compose

TanreiColorField

radio_button_unchecked

Flutter

TanreiColorField

radio_button_unchecked

React Native

ColorField

radio_button_unchecked

Variantes que no se incluyen en

tanrei: filled, outlined

Generado a partir de docs/status/status.json, specs/color-field.spec.json

Un campo de color con un botón del selector, y otro cuyo color rechaza el producto

Usa un campo de color donde las personas definen un color como un valor: un color de marca en un tema, el color de una etiqueta o de una categoría. Lo leen, lo escriben o lo pegan desde otra herramienta, y ven una muestra de él junto al texto. El campo se dibuja y se mide como el campo de texto de la misma variante y el mismo tamaño.

Se compone de un campo y una entrada de color. El campo es el marco: la etiqueta, la marca de obligatorio o de opcional, la ayuda y el error. La entrada de color es el control: la caja, la muestra, el valor como texto y el botón del selector. El campo de color no dibuja nada propio y no tiene ningún token: cada propiedad que tiene es una propiedad de uno de los dos, que recibe sin cambios.

Es un bloque tan ancho como el lugar en el que se pone, y su caja lo llena. No tiene ancho propio: para un campo más estrecho, dale un lugar más estrecho. Ya es un campo, así que nunca se pone dentro de un campo.

No dibuja ningún selector propio. Con picker, un botón al final pide uno: el del navegador, o una superficie que presenta el producto.

En la web es <tanrei-color-field>. Las demás plataformas todavía no lo han implementado.

Uso

link

value es un signo de número (#) seguido de seis dígitos hexadecimales en minúsculas (#0f766e), o una cadena vacía cuando no hay color. Nunca es un texto a medio escribir: mientras la entrada contiene algo que no es un color, value está vacío.

<form>
  <tanrei-color-field name="brand" label="Color de marca" value="#0f766e"
    required required-text="Obligatorio"
    supporting-text="Seis dígitos hexadecimales, como #0f766e."
    invalid-text="Introduce seis dígitos hexadecimales, como #0f766e."
    picker picker-label="Elegir color"></tanrei-color-field>
</form>

<script type="module">
  import '@tanrei/web/components/color-field';

  const brand = document.querySelector('tanrei-color-field');
  // El valor cambió: un color, o una cadena vacía. Ya es el nuevo.
  brand.addEventListener('input', () => preview(brand.value));
  // La persona confirmó un valor distinto: el foco salió del campo, pulsó Enter o el selector se cerró.
  brand.addEventListener('change', () => save(brand.value));
  // Se confirmó un texto que no es un color. El campo lo conserva y muestra invalidText,
  // que es también lo que lleva detail.message.
  brand.addEventListener('entryerror', (e) => console.log(e.detail.text, e.detail.message));
  // Para presentar un selector propio: cancela la petición, ábrelo y define value como lo que se eligió.
  brand.addEventListener('pickerrequest', (e) => {
    e.preventDefault();
    openMyPicker(e.detail.value).then((color) => (brand.value = color));
  });
</script>

import { ColorField } from '@tanrei/react';

<ColorField label="Color de marca" value={brand} picker pickerLabel="Elegir color"
  invalidText="Introduce seis dígitos hexadecimales, como #0f766e."
  onChange={(event) => setBrand(event.currentTarget.value)} />

Un nivel más abajo

link

El mismo campo, escrito a mano a partir de sus dos miembros, da la misma imagen y es, para la tecnología de apoyo, el mismo cuadro de texto con el mismo nombre, la misma descripción y los mismos estados:

<tanrei-field label="Color de marca" required required-text="Obligatorio"
  supporting-text="Seis dígitos hexadecimales, como #0f766e.">
  <tanrei-color-input name="brand" value="#0f766e"
    invalid-text="Introduce seis dígitos hexadecimales, como #0f766e."
    picker picker-label="Elegir color"></tanrei-color-input>
</tanrei-field>

El mismo campo escrito a mano: un campo con una entrada de color dentro

Baja a ese nivel cuando necesites una organización que el campo de color no ofrece:

Necesitas	Usa
Una etiqueta, la caja, una ayuda y un error	El campo de color
Algo tuyo dentro del marco, junto a la caja o debajo de ella	Un campo con una entrada de color y tu propio elemento dentro
La caja sola, en una fila o una columna que ya nombra el color: los tonos de una paleta, una celda de una tabla	La entrada de color sola, que recibe su nombre de su propio label

Lo que cambia un nivel más abajo es dónde se dice cada cosa. name y value están en la entrada de color, que es entonces el control con el que trata el formulario, y sus eventos se oyen en ella. label, error, disabled y la obligatoriedad se quedan en el campo, que se los pasa al control: no definas los de la propia entrada. El campo de color no hace nada que no hagan el campo y la entrada de color escritos a mano.

Especificaciones

link

Un campo de color vacío, blanco, negro, uno grande, uno deshabilitado, y la caja sola, una entrada de color, en una fila que nombra su color

El campo

link

Parte	Qué es
Etiqueta	Encima del contenedor (stacked), donde la dibuja el campo, o flotando dentro de él (filled, outlined), donde la dibuja la entrada de color. Es el nombre accesible, tanto si se dibuja como si se oculta con labelHidden
Marca de obligatoriedad	Después de la etiqueta: el tag de obligatoriedad en su forma de obligatorio, un asterisco o nada con required; el tag de obligatoriedad en su forma de opcional con optional
Muestra	Una muestra del valor al inicio del contenedor: un cuadrado pequeño relleno exactamente con el color del valor, dentro de una línea fina. Vacía, es solo la línea fina. No es un control
Entrada	El valor como texto. Una sola línea, que se desplaza
Botón del selector	Con picker: un botón de la variante text y de solo icono al final, que recibe su nombre de pickerLabel
Texto de apoyo	Una línea de ayuda, que empieza donde empieza el texto del valor, después de la muestra. Mientras el campo está en error, el texto de error ocupa su lugar (o va debajo de ella, donde el sistema de diseño conserva las dos), y es errorText mientras error es true e invalidText mientras el texto confirmado no es un color, o errorText donde invalidText está vacío

Las tres variantes y los tres tamaños, small (32), medium (40) y large (56), son los del campo de texto. El sistema predeterminado solo incluye stacked. La muestra está donde está el icono inicial de un campo de texto, con el tamaño de ese icono, de modo que un campo de color situado debajo de un campo de texto con icono inicial comparte con él los bordes de inicio.

Nada se mezcla con la muestra: ni el paso del cursor, ni un tinte de error, ni una sombra. Una muestra que cambia bajo el puntero es una muestra incorrecta. Deshabilitada, su relleno se dibuja más tenue y su borde se conserva.

El valor y el texto

link

Cuándo	Qué ocurre
La persona escribe, pega o dicta	Nada se rechaza ni se reescribe. Se lee el texto entero: si es un color, value es ese color; si no, está vacío. input se emite cuando value ha cambiado
El foco sale del campo, o Enter	El texto se confirma. Un color se vuelve a escribir en la forma propia del valor. change se emite si el valor es distinto del último confirmado
El texto confirmado no es un color	El texto se queda. El campo queda en error y muestra invalidText, y se emite entryerror. El error termina con la siguiente edición
El texto está vacío	value está vacío. Eso nunca es un error del campo
El producto define value	Se muestra el color, sea lo que sea lo que se haya escrito. No se emite ningún evento

Un texto se lee como un color cuando, sin contar los espacios que lo rodean, es exactamente seis dígitos hexadecimales, en mayúsculas o en minúsculas, con o sin el signo de número: 0F766E, #0f766e y #0F766E son todos #0f766e.

Todo lo demás no es un color: tres dígitos (#0f7), ocho (#0f766e80), un nombre (teal), una notación funcional (rgb(15, 118, 110)). Mientras se escribe, tres dígitos no son un color, porque el texto pasa por ellos de camino a los seis; al confirmar el texto se leen como los seis que representan, como los lee CSS: #0f7 pasa a ser #00ff77. No hay alfa ni colores de gama amplia.

No se notifica nada mientras la persona sigue escribiendo. Un error de entrada solo se produce cuando confirma.

El selector

link

Con picker, el campo muestra un botón al final. Al activarlo se emite pickerrequest, que lleva el valor.

El producto	Qué ocurre
No hace nada	El campo presenta el selector de color propio del navegador. Cada elección es una edición de la persona: el texto, la muestra, input. Cuando el selector se cierra, se emite change y el foco está en el botón del selector
Cancela la petición	El campo no presenta nada. El producto abre su propia superficie, anclada al campo, y define value como lo que se eligió. Esa superficie devuelve el foco al botón del selector cuando se cierra

Con el botón del selector visible, una pulsación en la muestra abre el selector, como una pulsación en el botón; el foco no pasa a la entrada, y el botón sigue siendo el camino del teclado. Sin el botón, una pulsación en la muestra lleva el foco a la entrada, como una pulsación en cualquier otra parte del campo.

Qué aporta cada miembro

link

• Del campo: las propiedades label, labelHidden, supportingText, errorText, error, disabled, required, optional, requiredMark, requiredText y optionalText; el slot label-icon; los tokens comp.field.*.
• De la entrada de color: las propiedades variant, size, value, invalidText, picker y pickerLabel; los eventos input, change, pickerRequest y entryError; los tokens comp.input-box.* para la caja, que leen todas las cajas de entrada, y comp.color-input.* para la muestra.

La entrada de color tiene un label, un labelHidden, un error y un disabled propios. No son los que define el campo de color: su label es el del campo, que da nombre a la entrada y que, en un campo filled u outlined, es lo que flota en la caja.

Tokens

link

El campo de color no tiene ningún token propio. Su caja lee los tokens de la entrada de color, y sus filas —la etiqueta, la marca, la ayuda y el error— leen los tokens del campo, allí donde estén definidos. La tabla siguiente enumera los del campo. Para cambiar una sola instancia, define en ella el token de un miembro:

<tanrei-color-field label="Color de marca"
  style="--tanrei-comp-field-label-gap: 12px"></tanrei-color-field>

Anatomía

Anatomía

Dibujado sobre el fixture stacked-empty, tal como lo dibuja el paquete web.

Parte	Descripción
1 field	The Field: the label row with its glyph and its requirement mark, and the supporting row with the help and the error text. In a look whose input floats the label it draws no label row.
2 color-input	The color input, as the Field's one control: the box, the swatch, the value as text, the picker button, and the label that floats in the box in the looks that float one.

Propiedades

Propiedad	Tipo	Valor predeterminado	Descripción
variant	stacked | filled | outlined	"stacked"	The text input's three looks, so that a color input is drawn as the text inputs beside it. Stacked is a filled box that shows focus and error with a line inside its edge and draws no label: the label of the Field that frames it stands above it. Filled and outlined float the label inside the box. Use one style per form. A design system may leave some out (the Tanrei system ships stacked only) or add values. — Color input
size	small | medium | large	"medium"	Minimum height of the container: stacked 32 / 40 / 56, as tall as a Button of the same size, so that the box and a Button side by side in one row stand as tall as each other; filled and outlined 40 / 48 / 56, which hold the label that floats inside them. These are the text input's three sizes, small for a bar, a toolbar or a dense row of controls. The hit area always meets the minimum target. A design system may add values. — Color input
value	string	""	The color the input holds: a number sign and six hexadecimal digits in lowercase ("#0f766e"), an opaque sRGB color; or empty for no color. It is never a half-typed text: while the input holds something that is not a color, value is empty. — Color input What the color field reports as its own is the value its color input holds, in that value's own form (CLF-43, CLI-16, CLI-21).
label	string	""	Names the control, visibly and to assistive technology. Required, unless the control names itself (a checkbox or a switch with its own label): then leave it empty and the field adds only help and an error. — Field Names the color input. In a filled or outlined look the input draws it, floating in its box, and the Field draws no label row (FLD-25, CLI-15).
labelHidden	boolean	false	Does not draw the label, which stays the accessible name. For a control whose visible label is elsewhere (a table column, a toolbar). — Field Hides the label wherever it would be drawn: the Field's row, or the input's floating label (FLD-25).
supportingText	string	""	Help shown below the control and given to assistive technology as the control's description. While the field is in error it gives way to errorText, unless the design system keeps both (comp.field.error-text.placement append). — Field
errorText	string	""	Shown while error is true, in supportingText's place — or below it, which then stays, where the design system's comp.field.error-text.placement is append: what is wrong and how to put it right, in words. — Field
error	boolean	false	Puts the field in the error condition: the error text is drawn, the control is exposed as invalid and, where it has an error condition of its own, drawn in it. What a value means is the product's to validate; the field never sets this itself. — Field The Field puts its color input in the input's own error condition (FLD-8, CLI-9).
disabled	boolean	false	Disables the control and draws the frame as disabled. Disable a framed control here, not on the control, so that its label follows. — Field The Field disables its color input, the picker button with it (FLD-14, CLI-31); the color field is then left out of its form (CLF-44).
required	boolean	false	What the form asks of the control: true exposes it as required and draws the required mark beside the label. It never validates: a missing answer is the product's to report with error. — Field The Field exposes its color input as required (FLD-10, CLI-11).
optional	boolean	false	Draws the optional tag after the label and adds optionalText to the control's description, because assistive technology has no state for it. Ignored while required is true: a control is never both. — Field
requiredMark	auto | tag | asterisk | none	"auto"	How this control shows that it is required: tag is a small filled Tag with requiredText, asterisk is "*" after the label, none draws nothing and keeps the semantics. Auto takes comp.field.requirement.mark, which follows sys.behavior.requirement-mark, the system's one answer. Ignored unless required is true. — Field
requiredText	string	""	The text of the required tag, in the product's language ("Required", "必須"). The product's: Tanrei has no word for it. Empty reads the product's words; with neither, FLD-24 says what is drawn. — Field
optionalText	string	""	The text of the optional tag, in the product's language ("Optional", "任意"); also read to assistive technology as part of the description. The product's: Tanrei has no word for it. Empty reads the product's words. — Field
invalidText	string	""	The words for an input committed with a text that is not a color ("Enter six hexadecimal digits, like #0f766e"), in the product's language: given to the Field that frames the input, which shows them as its error text (CLI-20). While it is empty that Field shows its own errorText. — Color input Shown by the Field, in its supporting row (FLD-28).
picker	boolean	false	Shows the picker button. Activated, it emits pickerRequest, and where the platform has a color picker of its own the input presents that picker unless the product cancelled the request. The input draws no picker surface itself. — Color input
pickerLabel	string	""	The accessible name of the picker button ("Choose color"). Required while picker is shown. — Color input

Slots

Slot	Descripción
label-icon	A glyph before the label. — Field

Eventos

Evento	Descripción
input	The person changed the value — by an edit of the text that made it a color, another color or no color, or by a pick in the platform's picker; carries the new value. Not emitted when the product sets value, nor for an edit that leaves value as it was. — Color input
change	The person committed a changed value: focus left the input, the action key was pressed, or the platform's picker closed; carries the value. — Color input
pickerRequest	The person activated the picker button; carries the value. Cancelling it keeps the input from presenting the platform's picker: the product then presents its own surface and sets value to what was picked. — Color input
entryError	The person committed a text that is not empty and is not a color; carries the text as typed and invalidText, the words the input has for it (empty where the product gave none: the Field that frames the input then shows its own errorText). — Color input

Estados

Comportamiento

Requisitos en formato EARS. Cada implementación de plataforma se prueba contra estos identificadores. El texto de los requisitos se muestra tal como está en la especificación, en inglés.

ID	Requisito
CLF-43	THE color field SHALL be a Field that frames one color input, and nothing else. It SHALL give label, labelHidden, supportingText, errorText, error, disabled, required, optional, requiredMark, requiredText and optionalText to its Field and variant, size, value, invalidText, picker and pickerLabel to its color input, each unchanged; SHALL hold the label-icon slot for its Field; and SHALL emit its color input's events as its own, each once. THE color field SHALL be as wide as the place it stands in, and its color input SHALL fill it: it is a block with no width of its own, as its Field is (FLD-1), around a control that fills the width it is given (CLI-44). Its value SHALL at every moment be the value its color input holds — a color in the value's own form, or the empty string (CLI-16) — and not the text the product set where the two differ (CLI-21). It SHALL draw no part of its own, hold no state of its own and have no token of its own: what it shows, how it behaves and what it exposes to assistive technology SHALL be exactly what that Field and that color input do when a product places the one in the other (FLD-1 to FLD-28; CLI-1 to CLI-44) — the label row and its requirement mark (FLD-2 to FLD-6), or the label that floats in the box with the Field's row left out (FLD-25, CLI-15, CLI-7); the supporting row, started at the value's text, after the swatch (FLD-7 to FLD-9, FLD-26, CLI-43); the name, the description and the states (FLD-10, FLD-11, FLD-14, CLI-11); and the entry error of a text that is not a color, shown in the Field's row (FLD-28, CLI-20).
CLF-44	WHERE the platform has forms (the web) THE color field SHALL be the one control the form sees: it SHALL take name, submit its color input's value, reset to the value it was first given, restore it on navigation, report to the form's constraint validation exactly what its color input would report there (CLI-11, CLI-20), and be left out WHILE disabled is true or a disabled group of the form holds it; its color input and its Field SHALL take no part in the form themselves. WHEN the action key asks for the form's submission (CLI-19) the form asked SHALL be the color field's own.
CLF-45	WHEN the color field is given focus — by the product, by a press on any part of it that FLD-12 or CLI-24 gives to the input, or by a form that reports its validity — THE color field SHALL pass the focus to the input of its color input, never to the picker button, and SHALL add no stop to the focus order: the stops inside it are its color input's, in that input's order (the input, then the picker button while it is shown, CLI-13). WHILE focus is anywhere inside it, the picker button included, THE color field SHALL count as focused for its Field, whose rows take their focused colors (FLD-13); the box takes its own only WHILE its input has focus (CLI-22). WHEN a picker the color input presented closes, focus SHALL be on the picker button (CLI-29), inside the color field.
CLF-46	IF the color field is placed in a Field THE color field SHALL in debug builds report that it is a field already and that the bare control is the color input, and both SHALL still render (FLD-15). WHILE it stands in a field group THE color field SHALL follow that group's disabled, through its own Field, and take nothing else from the group (FGR-20).
CLF-47	THE color field SHALL have no words of its own and SHALL read none: requiredText and optionalText are read by its Field (FLD-24), each from the instance's prop and then from the product's words; invalidText and pickerLabel are the instance's alone and are given to its color input as they are (CLI-42).
CLF-48	WHERE the platform has ARIA attributes (the web), WHEN the product sets an aria- attribute on the host, by the attribute or by the ARIA property that reflects it, THE color field SHALL move it to the data-aria- attribute of the same name, so that the host is no second node with its name, description or state, and SHALL expose it on the element that carries its role — an id reference by the elements it names in the host's tree or a tree around it, an error message as part of the description while the color field is invalid — except those the color field owns (aria-label, aria-labelledby, aria-disabled), which it SHALL move and not expose: its name is label (CLF-43). WHEN the product removes the aria- attribute or its data-aria- twin, or sets the ARIA property that reflects it (ariaLabel, ariaDescribedByElements…) to null, THE color field SHALL take it off that element. WHEN the product sets an aria- attribute the color field owns THE color field SHALL report it in debug builds.

Correspondencia de nombres por plataforma

Paridad no significa API idénticas. Cada plataforma expresa el mismo contrato con su propio estilo.

Especificación	Web	SwiftUI	Jetpack Compose	Flutter	React Native
Componente	tanrei-color-field	TanreiColorField	TanreiColorField	TanreiColorField	ColorField
variant · Propiedad	variant	variant	variant	variant	variant
size · Propiedad	size	size	size	size	size
value · Propiedad	value	hex	value	controller	value
label · Propiedad	label	label	label	labelText	label
labelHidden · Propiedad	labelHidden	labelsHidden	labelHidden	labelHidden	labelHidden
supportingText · Propiedad	supportingText	supportingText	supportingText	helperText	supportingText
errorText · Propiedad	errorText	errorText	errorText	errorText	errorText
error · Propiedad	error	error	isError	isError	error
disabled · Propiedad	disabled	disabled	enabled	enabled	disabled
required · Propiedad	required	isRequired	required	required	required
optional · Propiedad	optional	isOptional	optional	optional	optional
requiredMark · Propiedad	requiredMark	requiredMark	requiredMark	requiredMark	requiredMark
requiredText · Propiedad	requiredText	requiredText	requiredText	requiredText	requiredText
optionalText · Propiedad	optionalText	optionalText	optionalText	optionalText	optionalText
invalidText · Propiedad	invalidText	invalidText	invalidText	invalidText	invalidText
picker · Propiedad	picker	showsPicker	onPickerRequest	onPickerRequest	onPickerRequest
pickerLabel · Propiedad	pickerLabel	pickerLabel	pickerContentDescription	pickerSemanticLabel	pickerAccessibilityLabel
input · Evento	input	hex	onValueChange	onChanged	onValueChange
change · Evento	change	onCommit	onCommit	onCommit	onEndEditing
pickerRequest · Evento	pickerrequest	onPickerRequest	onPickerRequest	onPickerRequest	onPickerRequest
entryError · Evento	entryerror	onEntryError	onEntryError	onEntryError	onEntryError
Notas	The tag tanrei-color-field, the class TanreiColorField, the React name ColorField. The element is composed as every composed element on the web is (the web package's README, Composed elements); what follows is what is particular to it. Members: <tanrei-field> holding one <tanrei-color-input> in its default slot; the product places none. The host is display: block. Value member: tanrei-color-input. The host is the form's element — name, the value and its state, validity anchored on the input, reset to the value attribute, restore, form, a disabled fieldset — and the input inside has no name. Props, set as properties on the member each is from. On the Field: label, labelHidden, supportingText, errorText, error, disabled, required, optional, requiredMark, requiredText, optionalText. On the color input: variant, size, value, invalidText, picker, pickerLabel. Attributes are the members' own, kebab-case: label-hidden, supporting-text, error-text, required-mark, required-text, optional-text, invalid-text, picker-label. Props of one name on both members — label, labelHidden, error, disabled — are the Field's; the input's are never set by the element and reach the input through the connection. Events: input, change, pickerrequest and entryerror are the color input's own composed events and leave by themselves, with the host as their target and value already new; pickerrequest stays cancelable from outside, and the input reads the result of its own dispatch before it opens the browser's picker. None is stopped and none is copied. Their detail types are the member's, re-exported: TanreiColorInputPickerRequestDetail, TanreiColorInputEntryErrorDetail. The color input changes a value the product sets without an event — it holds 0F766E as #0f766e, and a text that is not a color as empty (CLI-21) — so the host's value is the value member's at every moment, read back changed with no event (CLF-43). Slots: label-icon is passed to the Field by a slot element of the same name, rendered only while the host has a child for it. The element has no default slot. Parts: the member hosts are field and color-input. Exported from the Field: label, label-icon, requirement-label, supporting-text. Exported from the color input: container, outline, active-indicator, label, requirement-label, swatch, input, picker-button. Two names collide, label and requirement-label. Each is exported with its member's name before it, always (field-label, color-input-label, field-requirement-label, color-input-requirement-label), and under the bare name from both members as well, because the two are one thing to a person and are never drawn at once: FLD-25 is the sentence that holds it. Focus: the shadow root does not delegate. focus() and blur() call the color input's; a press on the label row focuses the input by FLD-12, a press on the box by CLI-24, and a press on the help does nothing. The browser's picker is opened by the color input from inside its own shadow root, in the user activation of the press on its picker button: two shadow roots deep, which showPicker() allows. The connection is the Field's with its control (FLD-25, FLD-26, FLD-28; CLI-43); the element takes no part in it. Parts and tokens of its own: none. The element writes no custom property: --tanrei-comp-field-*, --tanrei-comp-input-box-* and --tanrei-comp-color-input-* reach the members by inheritance, and one color field is set apart by setting any of them on the element. What its twin cannot do that it does: nothing. The twin: <tanrei-field label="Brand color" required supporting-text="Six hexadecimal digits, like #0f766e."><tanrei-color-input name="brand" value="#0f766e" picker picker-label="Choose color"></tanrei-color-input></tanrei-field>. Words: the element has none and reads none (CLF-47).	Not built on this platform yet: the color input as a view of its own and the color field as the Field around it, reading comp.input-box, comp.color-input and comp.field tokens. TanreiColorField(_ label:, hex: Binding<String>, showsPicker:, pickerLabel:, onCommit:, onPickerRequest:, onEntryError:); labelHidden follows the .labelsHidden() environment and disabled follows .disabled(_:). The text element, the system color picker and the swatch are the color input's and are in its note. The product's words are read by the Field from the \.tanreiWords environment value.	Not built on this platform yet: the color input as a composable of its own and the color field as the Field around it, reading comp.input-box, comp.color-input and comp.field tokens. Compose idiom, as TextField: TanreiColorField(value, onValueChange, label, …); the caller keeps value (state hoisting), enabled is the inverse flag and isError keeps Compose's name. The picker button is shown when onPickerRequest is not null. The rest is the color input's and is in its note. The product's words are read by the Field from LocalTanreiWords.	Not built on this platform yet: the color input as a widget of its own and the color field as the Field around it, reading comp.input-box, comp.color-input and comp.field tokens. Flutter idiom, as TextField and InputDecoration: labelText, helperText, errorText and enabled keep Flutter's names, enabled being the inverse flag. TanreiColorFormField wraps it as a FormField<String>. The rest is the color input's and is in its note. The product's words are read by the Field from the TanreiWords inherited widget.	Not built on this platform yet: the color input as a component of its own and the color field as the Field around it, reading comp.input-box, comp.color-input and comp.field tokens. <ColorField label="Brand color" value={value} onValueChange={setValue} />. The rest is the color input's and is in its note. The product's words are read by the Field from the TanreiWordsProvider context.

Tokens

Token	Alias de	Valor resuelto (claro)
--tanrei-comp-field-counter-gap	sys.space.space200	16px
--tanrei-comp-field-error-text-gap	sys.space.space50	4px
--tanrei-comp-field-error-text-placement	—	0
--tanrei-comp-field-label-icon-gap	sys.space.space100	8px
--tanrei-comp-field-label-icon-size	sys.icon.small	20px
--tanrei-comp-field-label-gap	sys.space.space100	8px
--tanrei-comp-field-motion-state-duration	sys.motion.role.state.default	250ms
--tanrei-comp-field-motion-state-easing	sys.motion.easing.state	cubic-bezier(0.2, 0, 0, 1)
--tanrei-comp-field-requirement-asterisk-gap	sys.space.space25	2px
--tanrei-comp-field-requirement-gap	sys.space.space100	8px
--tanrei-comp-field-requirement-mark	sys.behavior.requirement-mark	0
--tanrei-comp-field-standard-counter-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-field-standard-disabled-counter-color	—	#1b1b1b · 38%
--tanrei-comp-field-standard-disabled-error-text-color	—	#1b1b1b · 38%
--tanrei-comp-field-standard-disabled-error-counter-color	—	#1b1b1b · 38%
--tanrei-comp-field-standard-disabled-error-label-icon-color	—	#1b1b1b · 38%
--tanrei-comp-field-standard-disabled-error-label-color	—	#1b1b1b · 38%
--tanrei-comp-field-standard-disabled-error-required-asterisk-color	—	#1b1b1b · 38%
--tanrei-comp-field-standard-disabled-error-supporting-text-color	—	#1b1b1b · 38%
--tanrei-comp-field-standard-disabled-error-value-text-color	—	#1b1b1b · 38%
--tanrei-comp-field-standard-disabled-label-icon-color	—	#1b1b1b · 38%
--tanrei-comp-field-standard-disabled-label-color	—	#1b1b1b · 38%
--tanrei-comp-field-standard-disabled-required-asterisk-color	—	#1b1b1b · 38%
--tanrei-comp-field-standard-disabled-supporting-text-color	—	#1b1b1b · 38%
--tanrei-comp-field-standard-disabled-value-text-color	—	#1b1b1b · 38%
--tanrei-comp-field-standard-error-text-color	sys.color.error	#cd262f
--tanrei-comp-field-standard-error-counter-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-field-standard-error-label-icon-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-field-standard-error-label-color	sys.color.on-surface	#1b1b1b
--tanrei-comp-field-standard-error-required-asterisk-color	sys.color.primary	#1b1b1b
--tanrei-comp-field-standard-error-supporting-text-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-field-standard-error-value-text-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-field-standard-focused-counter-color	—	#4b4b4b
--tanrei-comp-field-standard-focused-error-text-color	—	#cd262f
--tanrei-comp-field-standard-focused-error-counter-color	—	#4b4b4b
--tanrei-comp-field-standard-focused-error-label-icon-color	—	#4b4b4b
--tanrei-comp-field-standard-focused-error-label-color	—	#1b1b1b
--tanrei-comp-field-standard-focused-error-required-asterisk-color	—	#1b1b1b
--tanrei-comp-field-standard-focused-error-supporting-text-color	—	#4b4b4b
--tanrei-comp-field-standard-focused-error-value-text-color	—	#4b4b4b
--tanrei-comp-field-standard-focused-label-icon-color	—	#4b4b4b
--tanrei-comp-field-standard-focused-label-color	—	#1b1b1b
--tanrei-comp-field-standard-focused-required-asterisk-color	—	#1b1b1b
--tanrei-comp-field-standard-focused-supporting-text-color	—	#4b4b4b
--tanrei-comp-field-standard-focused-value-text-color	—	#4b4b4b
--tanrei-comp-field-standard-label-icon-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-field-standard-label-color	sys.color.on-surface	#1b1b1b
--tanrei-comp-field-standard-required-asterisk-color	sys.color.primary	#1b1b1b
--tanrei-comp-field-standard-supporting-text-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-field-standard-value-text-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-field-supporting-text-gap	sys.space.space50	4px
--tanrei-comp-field-value-text-gap	sys.space.space200	16px
--tanrei-comp-field-label-typescale	sys.typescale.label	500 14px/1.4286
--tanrei-comp-field-supporting-text-typescale	sys.typescale.label-small	500 12px/1.3333
--tanrei-comp-field-value-text-typescale	sys.typescale.label	500 14px/1.4286

Fixtures

Representaciones canónicas. Todas las plataformas capturan cada fixture con el mismo identificador para poder comparar los resultados.

variant: stacked (27)

stacked-empty

label: Brand color

stacked-filled

value: #0f766e label: Brand color

stacked-large

size: large value: #0f766e label: Brand color

stacked-label-hidden

value: #0f766e label: Brand color labelHidden: true

stacked-supporting

value: #0f766e label: Brand color supportingText: Six hexadecimal digits, like #0f766e.

stacked-white

value: #ffffff label: Page background

stacked-black

value: #000000 label: Text

stacked-picker

value: #0f766e label: Brand color picker: true pickerLabel: Choose color

stacked-picker-empty

label: Brand color picker: true pickerLabel: Choose color

stacked-picker-large

size: large value: #0f766e label: Brand color picker: true pickerLabel: Choose color

stacked-error

value: #fde047 label: Brand color errorText: Too light for white text. Choose a darke… error: true

stacked-error-picker

value: #fde047 label: Brand color errorText: Too light for white text. Choose a darke… error: true picker: true pickerLabel: Choose color

stacked-disabled

value: #0f766e label: Brand color disabled: true

stacked-picker-disabled

value: #0f766e label: Brand color disabled: true picker: true pickerLabel: Choose color

stacked-label-icon

value: #0f766e label: Brand color slots: label-icon

stacked-required

value: #0f766e label: Brand color required: true requiredText: Required

stacked-optional

label: Accent color optional: true optionalText: Optional

stacked-required-asterisk

value: #0f766e label: Brand color required: true requiredMark: asterisk

stacked-required-label-icon

value: #0f766e label: Brand color required: true requiredText: Required slots: label-icon

stacked-required-error

label: Brand color errorText: Choose a brand color. error: true required: true requiredText: Required

stacked-required-disabled

value: #0f766e label: Brand color disabled: true required: true requiredText: Required

stacked-required-ja

value: #0f766e label: ブランドカラー required: true requiredText: 必須 picker: true pickerLabel: 色を選択

stacked-optional-ja

label: アクセントカラー supportingText: # と 6 桁の 16 進数で入力します。 optional: true optionalText: 任意

stacked-required-rtl

value: #0f766e label: لون العلامة required: true requiredText: مطلوب picker: true pickerLabel: اختيار اللون direction: rtl

stacked-error-rtl

value: #fde047 label: צבע המותג errorText: בהיר מדי לטקסט לבן. בחרו צבע כהה יותר. error: true direction: rtl slots: label-icon

ltr-label-rtl

value: #0f766e label: Brand color (HEX) supportingText: sRGB, 6 digits direction: rtl

long-label

value: #0f766e label: The color of the primary buttons, the li… supportingText: Six hexadecimal digits after a number si… required: true requiredText: Required

variant: filled (5)

filled-empty

variant: filled label: Brand color

filled-filled

variant: filled value: #0f766e label: Brand color

filled-picker

variant: filled value: #0f766e label: Brand color picker: true pickerLabel: Choose color

filled-error

variant: filled value: #fde047 label: Brand color errorText: Too light for white text. Choose a darke… error: true

filled-disabled

variant: filled value: #0f766e label: Brand color disabled: true

variant: outlined (7)

outlined-empty

variant: outlined label: Brand color

outlined-filled

variant: outlined value: #0f766e label: Brand color

outlined-large

variant: outlined size: large value: #0f766e label: Brand color

outlined-picker

variant: outlined value: #0f766e label: Brand color picker: true pickerLabel: Choose color

outlined-error

variant: outlined value: #fde047 label: Brand color errorText: Too light for white text. Choose a darke… error: true

outlined-disabled

variant: outlined value: #0f766e label: Brand color disabled: true

outlined-required

variant: outlined value: #0f766e label: Brand color required: true requiredText: Required

Generado a partir de specs/color-field.spec.json, tokens/comp/field.tokens.json, design/tokens/

Qué dibuja la web de otra manera

link

• El shadow root del elemento contiene un <tanrei-field> con un <tanrei-color-input> dentro, y nada más. Importar el elemento define ambos.
• El campo de color es un elemento asociado a formularios. Recibe name y envía value: el color, o una cadena vacía. Se restablece al valor del atributo value, y notifica al formulario que falta un valor mientras required y value está vacío, y que la entrada es incorrecta mientras dura un error de entrada. Sus dos miembros no añaden ninguna entrada al formulario.
• value es siempre el de la entrada de color: un valor definido como 0F766E se lee de vuelta como #0f766e, y uno que no es un color, como una cadena vacía.
• input y change son eventos simples: lee value del elemento. pickerrequest y entryerror son CustomEvents, el primero con detail.value y el segundo con detail.text y detail.message. Son los eventos propios de la entrada de color, con el elemento como destino. detail.message es invalidText, y está vacío donde no diste ninguno, también mientras el campo muestra errorText en su lugar.
• Partes: field y color-input son los dos miembros. Sus propias partes tienen aquí los mismos nombres que un nivel más abajo: label-icon, supporting-text; container, outline, active-indicator, swatch, input, picker-button. label y requirement-label son las que se dibujan, sea cual sea el miembro que las dibuja; field-label, color-input-label, field-requirement-label y color-input-requirement-label nombran las de un solo miembro.
• El elemento no puede recibir el foco por sí mismo y no tiene rol: focus() va a la entrada, nunca al botón del selector. Una pulsación en la fila de la etiqueta, en la caja, en la muestra (cuando no hay botón del selector) o en una etiqueta flotante da el foco a la entrada. Una pulsación en la ayuda o en el texto de error no hace nada.
• La etiqueta y la ayuda toman sus colores de foco mientras el foco está en cualquier parte del campo, incluido el botón del selector. La caja toma los suyos solo mientras su entrada tiene el foco.
• Dale nombre con label —con label-hidden donde la etiqueta no deba dibujarse— y nunca con aria-label, que aquí no nombra nada.
• El elemento no tiene textos propios. requiredText y optionalText están vacíos hasta que los das. Un campo obligatorio sin requiredText muestra el asterisco donde estaría el tag.
• El selector del navegador cambia de un navegador a otro: una ventana emergente de la página en Chromium, la ventana de color del sistema en Firefox y Safari. Su aspecto, su colocación y sus teclas son los del navegador.
• Un texto en caracteres de ancho completo (＃０ｆ７６６ｅ) no se lee como un color.
• Antes de que el elemento esté definido, no tiene tamaño. Reserva la altura.

Pautas

link

Campo de color o campo de texto

link

Aspecto	Campo de color	Campo de texto
Contiene	Un color, como # y seis dígitos	Cualquier texto
Muestra	Una muestra del color junto al texto	El texto
Comprueba	Que el texto es un color	Nada

Para un color que se muestra y no se edita, dibuja una muestra con su valor o su nombre en texto al lado. Un campo de color es para un color que las personas definen.

Recomendado

link

• Escribe una etiqueta que diga para qué es el color, y mantenla visible en un formulario.
• Di la forma del valor en supportingText. Se queda mientras el campo está en error, así que invalidText no necesita repetirla.
• Nombra el color con palabras en supportingText donde eso importe («Verde azulado»). Un valor hexadecimal dice poco sobre cómo se ve un color.
• Da pickerLabel siempre que picker esté activado.
• Valida tú lo que el color significa (su contraste frente a un fondo, un color que ya está en uso) y dilo con error y errorText.
• Usa una entrada de color en una fila que ya nombra cada color, como los tonos de una paleta: es la caja sola, que recibe su nombre de su propio label.

Evita

link

• No distingas un color solo por la muestra. El valor es texto; una persona que no puede distinguir dos muestras lee dos valores distintos.
• No trates un value vacío como un error por sí mismo. required nunca valida.
• No definas aria-invalid ni error mientras la persona escribe. Espera a change o a entryerror.
• No pongas un campo de color dentro de un campo. Ya es un campo; el control que un campo enmarca es la entrada de color.

Accesibilidad

link

Rol

textbox

Etiquetado

The color field adds nothing to what its members expose and coordinates nothing: the Field gives the color input its name, its description and its required, invalid and disabled states (FLD-8, FLD-10, FLD-11, FLD-14), and the color input carries them on its own element (CLI-11). Assistive technology meets one text box named by label whose value is the color as text, and, while picker is true, one button named by pickerLabel — exactly as it meets a Field around a color input written by hand.

Objetivo mínimo

El área de pulsación cumple el tamaño mínimo de objetivo aunque el tamaño visual sea menor. minimum 32px · pointer 44px · spacing 8px · touch 48px

Teclado

Teclas	Acción
Every key	The color input's (its accessibility block; CLI-13, CLI-19, CLI-28). The color field handles no key and adds no focus stop (CLF-45).

Notas

• One level down is the same thing: a Field with a color input in it. Every fixture has that pair as its twin, and the accessibility tree of the two is the same (CLF-43).
• On the web the two members stand in the color field's own shadow root, so the form meets the color field and not the input (CLF-44); focus passes through to the input (CLF-45).
• The color is never told by the swatch alone (WCAG 1.4.1), an error is always words (WCAG 3.3.1), and the swatch alone keeps its color in forced colors: each is the color input's or the Field's, and is said there (CLI-25, CLI-35, FLD-7, FLD-17).

Generado a partir de specs/color-field.spec.json, tokens/sys/measure.tokens.json

De qué se encarga el componente

link

• La entrada es un campo de texto. Su nombre es label, tanto si se dibuja como si se oculta, y su valor es el texto que muestra.
• El texto de apoyo o de error que se muestra es su descripción, con optionalText mientras el campo es opcional.
• Se expone como no válido mientras error es true o dura un error de entrada, y como obligatorio mientras required está activado.
• Un error que aparece mientras el campo tiene el foco se anuncia una vez, de forma cortés. Nunca le quita el foco.
• La muestra es decorativa y queda oculta para la tecnología de apoyo: el texto del valor dice el color.
• El botón del selector es un botón aparte, que recibe su nombre de pickerLabel y se expone como un botón que abre un diálogo. Es una parada del foco después de la entrada. El foco que se da al propio campo va siempre a la entrada.
• No se anuncia nada cuando el valor cambia, y el campo no añade ningún nombre del color.
• Mientras un método de entrada está componiendo, el campo no lee nada y no gestiona ninguna tecla.
• El área de pulsación del campo cumple el objetivo mínimo, y el botón del selector es un objetivo completo.
• Con el texto al 200%, la etiqueta y la ayuda saltan de línea. El valor se queda en una sola línea, y se desplaza; la muestra conserva su tamaño.
• Con colores forzados, el campo gana un borde y toma los colores de la persona. Solo la muestra conserva el color del valor, porque mostrar ese color es su función; su borde es del color del texto.
• En un diseño de derecha a izquierda, el campo se refleja: la muestra a la derecha, el botón del selector a la izquierda. El valor en sí sigue de izquierda a derecha.

Carencias conocidas en la web:

• El selector del navegador no es de Tanrei: su accesibilidad es la del propio navegador.
• Antes de que el elemento esté definido, no se dibuja nada.

Qué debes hacer tú

link

• Da un label a cada campo de color.
• Escribe invalidText y pickerLabel en el campo, en el idioma de la página. Da requiredText y optionalText en el campo, o una sola vez para todo el producto con setWords({ requiredText, optionalText }). Consulta Los textos del producto.
• Valida tú el color, activa error y escribe errorText de modo que diga cómo corregir el color.
• Si presentas tu propio selector, ábrelo desde el botón del selector, dale un nombre y devuelve el foco al botón cuando se cierre.