Base field

<zeno-base-field>FormsSource

The label, help text and error message around a control. Use it to lay out a control that does not render these itself.

import '@usezeno/tokens/css';
import '@usezeno/core/web-components';

Examples

Label and help text

The field draws a label and help text around the control you put inside. The control in these examples has its own aria-label, because the field’s label does not reach it. See the gaps below.

<zeno-base-field label="Email" help-text="We only use it to send receipts.">
  <input type="email" aria-label="Email" placeholder="ada@example.com" />
</zeno-base-field>

Error, success and warning

A message shows only when its flag and its text are both set. An error wins over a success, and a success wins over a warning.

<zeno-base-field label="File name" invalid error-message="Enter a file name.">
  <input type="text" aria-label="File name" aria-invalid="true" />
</zeno-base-field>
<zeno-base-field label="User name" success success-message="This name is free.">
  <input type="text" aria-label="User name" value="ada" />
</zeno-base-field>
<zeno-base-field label="Password" warning warning-message="Short passwords are easy to guess.">
  <input type="password" aria-label="Password" value="12345" />
</zeno-base-field>

Required, and text after the label

required adds a mark to the label. The label-suffix slot puts content after the label text.

(optional)

<zeno-base-field label="Project name" required>
  <input type="text" aria-label="Project name" required />
</zeno-base-field>
<zeno-base-field label="Notes">
  <span slot="label-suffix">(optional)</span>
  <textarea aria-label="Notes" rows="2"></textarea>
</zeno-base-field>

Layout and sizes

layout="horizontal" puts the label beside the control. size changes the label and message text.

English German

<zeno-base-field layout="horizontal" label="Language" help-text="Used for dates and numbers.">
  <select aria-label="Language">
    <option>English</option>
    <option>German</option>
  </select>
</zeno-base-field>
<zeno-base-field size="sm" label="Small" help-text="Small help text.">
  <input type="text" aria-label="Small" />
</zeno-base-field>
<zeno-base-field size="lg" label="Large" help-text="Large help text.">
  <input type="text" aria-label="Large" />
</zeno-base-field>

Attributes and properties

Property	Attribute	Type	Default	Description
label	label	string	–
labelFor	label-for	string	–
helpText	help-text	string	–
errorMessage	error-message	string	–
successMessage	success-message	string	–
warningMessage	warning-message	string	–
layout	layoutreflects	'vertical' | 'horizontal'	'vertical'
size	sizereflects	'sm' | 'md' | 'lg'	'md'
required	requiredreflects	boolean	false
disabled	disabledreflects	boolean	false
invalid	invalidreflects	boolean	false
success	successreflects	boolean	false
warning	warningreflects	boolean	false
hideLabel	hide-label	boolean	false
showMessageIcon	show-message-icon	boolean	true
testId	–	string	–	Test ID for automated testing From ZenoElement.

Methods

Method	Description
focus(): void	Focus the component or its first focusable element From ZenoElement.
blur(): void	Blur the component or its focused element From ZenoElement.

Events

This element sends no events.

Slots

Slot	Description
Default	The control.
label-suffix	Content after the label text.

CSS parts

Part
control
field
help-text
label
message

CSS custom properties

This element documents no custom properties of its own. Style it through its parts and through the tokens it reads.

The element's own source reads no tokens.

Accessibility

Keyboard

This element handles no keys of its own.

Forms

This element is not a form control. It adds nothing to a form's data.

Notes

• The label is a native <label> in the shadow root. label-for sets its for attribute.
• An error message has role="alert" and aria-live="assertive". Success and warning messages have role="status" and aria-live="polite".
• The message icon is hidden from assistive technology.
• The field does not take focus and handles no keys. Focus and keyboard behaviour belong to the control you slot in.

Tests and known gaps

• No tests of its own. The only check is that the element registers and renders (smoke.test.ts).
• Not checked with axe-core.
• Has no Storybook story.

20 of the 25 properties, methods, events, slots and parts above have no description in the source

• the property label
• the property labelFor
• the property helpText
• the property errorMessage
• the property successMessage
• the property warningMessage
• the property layout
• the property size
• the property required
• the property disabled
• the property invalid
• the property success
• the property warning
• the property hideLabel
• the property showMessageIcon
• the part control
• the part field
• the part help-text
• the part label
• the part message

Known gaps:

• The label is not connected to the slotted control. for cannot point from the shadow root to an element outside it, so the control gets no name from the label and a click on the label does not focus it. Give the control its own aria-label.
• The field means to copy aria-describedby, required, disabled and aria-invalid to the slotted control, but that code never runs. It is assigned over the slot’s assignedElements method and nothing calls it. Set these attributes on the control yourself.
• Even if that code ran, aria-describedby could not work. The help text and the message are in the shadow root, and the control outside it cannot refer to their ids. Help text is never tied to the control.
• The message icons are missing. The field asks for alert-circle, check-circle and alert-triangle, and zeno-icon does not register these names.
• show-message-icon is on by default, and a Boolean attribute cannot be set to false in HTML. It can only be turned off from JavaScript with showMessageIcon = false.
• hide-label removes the label from the page. It is not kept for screen readers.
• disabled dims the label and blocks the mouse, but the slotted control is not disabled. It can still be reached and changed with the keyboard.
• required only draws the mark on the label. It does not make the control required.
• No other Zeno form element uses this field. zeno-input, zeno-select and the others draw their own label and error text.