Skip to content

SiFormItemComponent documentation

selector
si-form-item

Input Properties

NameTypeDefaultDescription
disableErrorPrinting
booleanfalseDisables the automatic error printing. Error printing will be enabled by default in v46.
formErrorMapper
SiFormValidationErrorMapper
label
Required		TranslatableStringThe label to be displayed in the form item. It will be translated if a translation key is available.
labelWidth
(string | number)A custom width value to be applied to the label. A value of 0 is allowed as well to visually hide away the label area.

Numbers will be converted to pixels. Using numbers is discouraged and might be dropped.

Example: labelWidth="100px"
required
booleanfalseDefines that this form item is required for the overall form to be valid.

Types Documentation

Interface for form error mapper. It resolves a key to either a translatable string or function which is called with the validation error for its key and should return a translatable string.
Index signature: [ key: string ]: (undefined | string | (error: any) => string)
Properties
dateFormat?: (TranslatableString | (error: { format: string }) => TranslatableString)
email?: (TranslatableString | (error: { email: boolean }) => TranslatableString)
max?: (TranslatableString | (error: { actual: number, max: number }) => TranslatableString)
maxDate?: (TranslatableString | (error: { actual: Date, max: Date }) => TranslatableString)
maxLength?: (TranslatableString | (error: { actualLength: number, requiredLength: number }) => TranslatableString)
min?: (TranslatableString | (error: { actual: number, min: number }) => TranslatableString)
minDate?: (TranslatableString | (error: { actual: Date, min: Date }) => TranslatableString)
minLength?: (TranslatableString | (error: { actualLength: number, requiredLength: number }) => TranslatableString)
numberFormat?: (TranslatableString | (error: { numberFormat: boolean }) => TranslatableString)
pattern?: (TranslatableString | (error: { pattern: (string | RegExp) }) => TranslatableString)
required?: (TranslatableString | (error: { required: boolean }) => TranslatableString)
requiredTrue?: (TranslatableString | (error: { required: boolean }) => TranslatableString)
(string & Translatable)
Represents a translatable string. This can either be a translation key, e.g. ACTIONS.EDIT that will be automatically translated when displayed on the UI or a pre-translated string, e.g. Edit . Equivalent to a normal string in usage and functionality.
Translatable
import

Except where otherwise noted, content on this site is licensed under MIT License.