CSS: form-field

.instui-form-field — Wrapiwr maes ffurflen: label, ei reolaethau, a gosodiadau llinell-yn-linnell, angenrheidiol, neu ddarllen-yn-unig.

Mae neges gwall yn aros wedi’i chuddio tan fod rheolaeth y maes yn :user-invalid (ar ôl i’r defnyddiwr ryngweithio) neu rydych chi’n ychwanegu’r dosbarth -invalid. Defnyddiwch -layout-inline i osod y label wrth ymyl y rheolaethau a -layout-stacked i’w osod drosodd. Mae hefyd yn gosod ei gap ei hun rhwng y label, y rheolaethau, a’r negeseuon; mae cadwynu darparwr bylchau -gap-* yn disodli’r gwerth adeiledig hwnnw.

Source: form-field.css

Hygyrchedd

Mae elfen <label> yn amgáu’r reolaeth, felly mae testun y label yn ei enwi’n frodorol; mae’r seren angenrheidiol yn addurniadol ac ni ddylid ei darllen gan dechnoleg gynorthwyol (aria-hidden), a daw’r neges gwall i’r amlwg unwaith y bydd y reolaeth yn :user-invalid neu rydych chi’n ychwanegu’r dosbarth -invalid.

Defnydd

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

Enghreifftiau

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

Strwythur

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

Modyfiwyr

Modyfiwr	Disgrifiad
.-inline	Trefniant llinell-yn-linnell (cysyniad byr am -layout-inline).
.-invalid	Cyflwr annilys (gwall).
.-label-align-end	Alinio label i’r diwedd.
.-label-align-start	Alinio label i’r dechrau.
.-layout-inline	Trefniant llinell-yn-linnell: label wrth ymyl y rheolaethau.
.-layout-stacked	Trefniant wedi’i stacio: label uwchben y rheolaethau.
.-readonly	Cyflwr darllen-yn-unig.
.-v-align-bottom	Alinio gwaelod y label gyda’r rheolaethau.
.-v-align-top	Alinio brig y label gyda’r rheolaethau.

Rhannau

Rhan	Disgrifiad
.controls	Ardal y reolaeth wrth ymyl neu o dan y label.
.label	Y label maes.

Is-elfennau

Is-elfen	Disgrifiad
::after	Yn rendro’r seren addurniadol sy’n nodi maes angenrheidiol ar ôl testun y label pan fo’r maes yn ofynnol.

Statwsau

Statws	Disgrifiad
:required	—

Tocynnau a ddefnyddiwyd

Token	Math	Gwerth
--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)

Cefnogaeth porwr

• Yn cynnwys ei arddull elfennol gyda rheolyn CSS @scope; yn gofyn am Chromium, Firefox, neu Safari diweddar.

Is-gydrannau

• form-field-messages
• text-input

Perthnasol

• form-field-messages — Renders the field's hint, error, and success messages.
• form-field-group — Grwpio meysydd cysylltiedig o dan legend a rennir.