CSS: form-field

.instui-form-field — Yon vlope chan fòm: yon etikèt, kontwòl li yo, ak layout anliy, obligatwa, oswa sèlman-li-lis.

Yon mesaj erè rete kache jiskaske kontwòl chan an vin :user-invalid (apre itilizatè a entèaji) oswa ou ajoute klas -invalid. Sèvi ak -layout-inline pou mete etikèt la bò kote kontwòl yo epi -layout-stacked pou mete li anlè. Li mete tou pwòp gap li ant etikèt la, kontwòl yo, ak mesaj yo; chenen yon modifikatè espas -gap-* pral ranplase valè entegre sa a.

Source: form-field.css

Aksè

Eleman <label> la vlope kontwòl la, konsa tèks etikèt la nonmen li natif natal; estèrik obligatwa a se dekoratif e li dwe kache pou teknoloji asistans (aria-hidden), epi mesaj erè a parèt yon fwa kontwòl la vin :user-invalid oswa ou ajoute klas -invalid.

Itilizasyon

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

Egzanp

<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>

Estrikti

.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;

Modifikatè

Modifikatè	Deskripsyon
.-inline	Layout anliy (fòm kout pou -layout-inline).
.-invalid	Eta ki pa valab (erè).
.-label-align-end	Alinye tèks etikèt la sou fen an.
.-label-align-start	Alinye tèks etikèt la sou kòmansman an.
.-layout-inline	Layout anliy: etikèt bò kote kontwòl yo.
.-layout-stacked	Layout anpile: etikèt anlè kontwòl yo.
.-readonly	Eta sèlman-li-lez.
.-v-align-bottom	Alinye etikèt la anba menm ak kontwòl yo.
.-v-align-top	Alinye etikèt la anlè menm ak kontwòl yo.

Pati

Pati	Deskripsyon
.controls	Zòn kontwòl la bò kote oswa anba etikèt la.
.label	Etikèt chan an.

Pseudo-eleman

Pseudo-eleman	Deskripsyon
::after	Rann estèrik dekoratif ki endike chan obligatwa a apre tèks etikèt la lè chan an obligatwa.

Eta

Eta	Deskripsyon
:required	—

Tokens konsome

Token	Tip	Valè
--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)

Sipò navigatè

• Gen estil eleman li yo ak règ CSS @scope; bezwen yon Chromium, Firefox, oswa Safari resan.

Sou-konpozan

• form-field-messages
• text-input

Ki gen rapò

• form-field-messages — Rann konsèy, erè, ak mesaj siksè chan an.
• form-field-group — Gwoupe chan ki gen rapò anba yon legend pataje.