Form field

Preview

Basic

With error

With constraint

Usage

<cs-form-field label="Name" description="Your full name.">
  <cs-input placeholder="John Doe"></cs-input>
</cs-form-field>

<cs-form-field label="Email" error-text="Invalid email.">
  <cs-input type="email"></cs-input>
</cs-form-field>

Properties

__analytics-metadataAnalyticsMetadata

__disable-guttersboolean

Disable the gutter applied by default.

__hide-labelboolean

Visually hide the label.

__styleCSSProperties

analytics-metadataFormFieldProps.AnalyticsMetadata

Specifies additional analytics-related metadata.

instanceIdentifier - A unique string that identifies this component instance in your application.
errorContext - Identifies the error category and sub-category.

character-count-textstring

Character count constraint displayed adjacent to the constraintText. Use this to provide an updated character count on each keypress that is debounced for screen reader users.

control-idstring default: generateUniqueId('formfield')

The ID of the primary form control. You can use this to set the for attribute of a label for accessibility.

If you don't set this property, the control group automatically sets the label to the ID of an inner form control (for example, an input component). This only works well if you're using a single control in the form field.

i18n-stringsFormFieldProps.I18nStrings

An object containing all the necessary localized strings required by the component.

stretchboolean default: false

Determines whether the primary control should expand to 12 columns.

By default (or when this property is set to false), the primary control occupies 9 columns. The secondary control uses the remaining 3 columns. On smaller viewports, both components occupy 12 columns and stack on top of each other.

If this property is set to true, the primary control uses the full 12 columns. The secondary control (if present) also uses 12 columns, and the two controls stack on top of each other.

Slots

constraintText: Constraint text that's displayed below the control. Use this to provide additional information about valid formats, etc.
default: The primary form control (for example, input, textarea, etc.).
description: Detailed information about the form field that's displayed below the label.
errorText: Text that displays as a validation error message. If this is set to a non-empty string, it will render the form field as invalid.
info: Use to display an 'Info' link next to the label.
label: The main label for the form field.
secondaryControl: A secondary control. You can use this for custom actions and content.
warningText: Text that displays as a validation warning message. If this is set to a non-empty string, it will render the form field in a warning state.