Field

Displays different type of form fields.

Text

Note: Attributes can both be set as component parameters and in attribute list. Using attributes implemented in component parameters, will result in a warning. Attributes set will automatically appear wherever suitable (on html-input or component level).

Hey! Want some help with this?

Range

Color

Parameters (Blade)

Key Default value Type Available values Description
label
string - Label for the field.
name
string - The name of the field (html name='')
type
text string - text, checkbox and radio
validationRegexp
false boolean - Regular expression for validation. Will apply on non empty strings or all strings when required.
invalidMessage
false boolean - Message to display when the field is invalid.
required
false boolean - Require this field to be filled in.
autocomplete
on string - Browser automatically completes the input values based on values that the user has entered before. Reference: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-autocomplete
value
string - Field value
icon
string - Adds a icon before the input field (string)
size
md string - -
radius
md string - If any special type of rounded corners should be used (none, xs, sm, md, lg)
placeholder
string - Example value for field
hideLabel
false boolean - This will remove the visible label. Label will be auditible for screen readers.
helperText
string - Text displayed below the field.
multiline
false boolean - Render textarea instead of input. Boolean or number of rows to render.
borderless
false boolean - Removes the border around the input field
shadow
false boolean - If the current theme applies shadows to element, append shadow here too.
fieldAttributeList
[] array - Attributes for field element. Valid input attributes are casted to here from attributesList.
moveAttributesListToFieldAttributes
true boolean - If we should move attributesList to fieldAttributeList automatically
description
string - Description for the field.
id
string - The DOM id of the component.
classList
[] array - Array containing wrapping classes array
attributeList
[] array - Array containing keys and values rendered as attributes

Parameters (CSS)

Key Default value Type Available values Description
--c-field--border-radius
var(--border-radius) range - Border Radius
--c-field--border-width
var(--border-width) range - Size
--c-field--space
var(--space) range - Base spacing unit. Used for padding and margin inside components.
--c-field--color--danger
var(--color--danger) color - Danger
--c-field--color--success
var(--color--success) color - Success
--c-field--color--surface-alt
var(--color--surface-alt) color - Manual companion token for subtle surface backgrounds.
--c-field--color--surface-border
var(--color--surface-border) color - Manual companion token for borders on surface elements.
--c-field--shadow-color
var(--shadow-color) rgba - Shadow Color
--c-field--shadow-amount
var(--shadow-amount) range - Multiplier for elevation shadows. 0 = none, 1 = default.
--c-field--color--surface-contrast
var(--color--surface-contrast) color - Used for text and icons on surface backgrounds with less contrast.
--c-field--base
var(--base) range - Main unit that drives radius and spacing scales.
--c-field--corner-shape
var(--corner-shape) select square, round, squircle, circular, bevel, scoop Corner Shape
--c-field--color--primary
var(--color--primary) color - Primary
--c-field--color--danger-contrast
var(--color--danger-contrast) color - Danger Contrast