Field
The Field component provides a reusable pattern for field in the interface.
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).
Range
Color
API
| Parameter | Default | Description |
|---|---|---|
|
label
|
Label for the field. | |
|
name
|
The name of the field (html name='') | |
|
type
|
text | text, checkbox and radio |
|
validationRegexp
|
false | Regular expression for validation. Will apply on non empty strings or all strings when required. |
|
invalidMessage
|
false | Message to display when the field is invalid. |
|
required
|
false | Require this field to be filled in. |
|
autocomplete
|
on | 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
|
Field value | |
|
icon
|
Adds a icon before the input field (string) | |
|
size
|
md | - |
|
radius
|
md | If any special type of rounded corners should be used (none, xs, sm, md, lg) |
|
placeholder
|
Example value for field | |
|
hideLabel
|
false | This will remove the visible label. Label will be auditible for screen readers. |
|
helperText
|
Text displayed below the field. | |
|
multiline
|
false | Render textarea instead of input. Boolean or number of rows to render. |
|
borderless
|
false | Removes the border around the input field |
|
shadow
|
false | If the current theme applies shadows to element, append shadow here too. |
|
fieldAttributeList
|
[] | Attributes for field element. Valid input attributes are casted to here from attributesList. |
|
moveAttributesListToFieldAttributes
|
true | If we should move attributesList to fieldAttributeList automatically |
|
description
|
Description for the field. |
CSS API
| Variable | Default | Type | 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 |