CSS: form-field ​

.instui-form-field — Un contenedor de campo de formulario: una etiqueta, sus controles y diseños en línea, obligatorios o de solo lectura.

Un mensaje de error permanece oculto hasta que el control del campo está :user-invalid (después de que el usuario interactúe) o añades la clase -invalid. Usa -layout-inline para colocar la etiqueta junto a los controles y -layout-stacked para situarla encima. También establece su propio gap entre la etiqueta, los controles y los mensajes; encadenar un modificador de espaciado -gap-* anula ese valor incorporado.

Source: form-field.css

Accesibilidad ​

El elemento <label> envuelve el control, por lo que el texto de la etiqueta lo nombra de forma nativa; el asterisco de obligatorio es decorativo y debe ocultarse a las tecnologías de asistencia (aria-hidden), y el mensaje de error aparece una vez que el control está :user-invalid o añades la clase -invalid.

Uso ​

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/form-field.css";

Ejemplos ​

html
<label class="instui-form-field">
  <span class="label">Email address</span>
  <span class="controls"><input class="instui-text-input" type="email" placeholder="[email protected]"></span>
  <div class="instui-form-field-messages">
    <span class="instui-form-field-message -type-hint">We'll never share it.</span>
    <span class="instui-form-field-message -type-error">Enter a valid email address.</span>
  </div>
</label>

Estructura ​

text
.instui-form-field
  .label
  .controls
    text-input (component)
  form-field-messages (component)
flowchart TD n0[".instui-form-field"]:::cssdoc-root n1(".label"):::cssdoc-part n2(".controls"):::cssdoc-part n3(["text-input"]):::cssdoc-component n4(["form-field-messages"]):::cssdoc-component n0 --> n1 n2 --> n3 n0 --> n2 n0 --> n4 click n3 "/api/css/text-input.md" click n4 "/api/css/form-field-messages.md" classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Modificadores ​

ModificadorDescripción
.-inlineDiseño en línea (abreviatura de -layout-inline).
.-invalidEstado inválido (error).
.-label-align-endAlinea el texto de la etiqueta al final.
.-label-align-startAlinea el texto de la etiqueta al inicio.
.-layout-inlineDiseño en línea: etiqueta junto a los controles.
.-layout-stackedDiseño apilado: etiqueta encima de los controles.
.-readonlyEstado de solo lectura.
.-v-align-bottomAlinea la etiqueta en la parte inferior con los controles.
.-v-align-topAlinea la etiqueta en la parte superior con los controles.

Partes ​

ParteDescripción
.controlsEl área de control junto a la etiqueta o debajo de ella.
.labelLa etiqueta del campo.

Pseudoelementos ​

PseudoelementoDescripción
::afterRenderiza el asterisco decorativo de campo obligatorio después del texto de la etiqueta cuando el campo es obligatorio.

Estados ​

EstadoDescripción
:required—

Tokens consumidos ​

TokenTipoValor
--instui-component-form-field-layout-asterisk-color<color>LightDarklight-dark(#CF1F24, #FA917F)
--instui-component-form-field-layout-font-family[ <font-family-name> | <generic-font-family> ]#Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-form-field-layout-font-size<length>1rem
--instui-component-form-field-layout-font-weight<integer>400
--instui-component-form-field-layout-gap-inputs<length>0.75rem
--instui-component-form-field-layout-gap-primitives<length>0.5rem
--instui-component-form-field-layout-line-height<length>1.125rem
--instui-component-form-field-layout-readonly-text-color<color>LightDarklight-dark(#576773, #AAB0B5)
--instui-component-form-field-layout-text-color<color>LightDarklight-dark(#273540, #ffffff)

Compatibilidad con navegadores ​

  • Contiene los estilos de su elemento con la at-rule de CSS @scope; requiere una versión reciente de Chromium, Firefox o Safari.

Subcomponentes ​

Relacionado ​