Fields

The Field variants of our input components provide convenient shorthand for the composition of Label, Component, and Validation message. As this is a normal use case for all form inputs, we will do our best to ensure that every Input... has an equivalent Field....

FieldCheckbox

Interface of FieldCheckbox
🏗 Coming Soon

The <FieldCheckbox /> component is composed of a <Checkbox /> component and a <Label /> component. Using <FieldCheckbox /> allows for rendering validation messages.

FieldCheckbox Validation

The <FieldCheckbox /> components accepts validationMessage as a property. This is an object with properties type and message.

See ValidationMessage here

If you have multiple fields in need of validation, it is recommended that you wrap them in a <Form /> component and pass to it a dictionary with key as field name and value as a ValidationMessage.

The alignValidationMessage can also be used to adjust where the validation message appears in relation to the input field. By default, it will render to the right, which is the best practice in most cases.

Note: In the current implementation, any ValidationMessage set in a <FieldCheckbox /> component will be overridden by ValidationMessages set in the parent <Form /> component. Because of this, it is highly recommended that you only ever directly set ValidationMessage if a <FieldCheckbox /> is outside a <Form />.

FieldCheckboxGroup

Interface of FieldCheckboxGroup
🏗 Coming Soon

Groups of checkboxes can be displayed with FieldCheckboxGroup.

There are two "inline" variations:

  • The inline prop will put the group label and all the inputs in one line (wrapping the inputs as necessary)
  • The inputsInline prop will stack the group label on top but keep all the inputs inline

defaultValue checked

defaultValue checked

Validation message and required

Select at least 1 cheese

Validation message and required

Select at least 1 cheese

everything is disabled

everything is disabled

only one checkbox is disabled and defaultValue

only one checkbox is disabled and defaultValue

FieldChips

The <FieldChips /> component is composed of an <InputChips /> component and a <Label /> component. Using <FieldChips /> allows for rendering validation messages, label, details and description. By default, the label will render directly above the input field, which is the recommended convention, however this is adjustable with the inline property.

5/50

this is a description

This is an error

FieldColor

Interface of FieldColor
🏗 Coming Soon

This component is composed of an InputColor and a Label. It also has a ColorWheel that appears in a Popover upon click of the color swatch.

FieldDate

Import path: @looker/components/lib/FieldDate

Interface of FieldDate
🏗 Coming Soon

This component is composed of an InputDate and a Label.

Su
Mo
Tu
We
Th
Fr
Sa
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
Validation Error
Su
Mo
Tu
We
Th
Fr
Sa
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
Select a valid calendar date
Su
Mo
Tu
We
Th
Fr
Sa
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6

FieldDateRange

Import path: @looker/components/lib/FieldDateRange

Interface of FieldDateRange
🏗 Coming Soon

This component is composed of an InputDateRange and a Label.

Date (07/27/2020)
Date (07/27/2020)
Su
Mo
Tu
We
Th
Fr
Sa
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
Su
Mo
Tu
We
Th
Fr
Sa
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
Date (07/27/2020)
Date (07/27/2020)
Su
Mo
Tu
We
Th
Fr
Sa
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
Su
Mo
Tu
We
Th
Fr
Sa
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
Select a valid calendar date
05/18/2020
05/21/2020
Su
Mo
Tu
We
Th
Fr
Sa
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
Su
Mo
Tu
We
Th
Fr
Sa
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4

FieldRadio

Interface of FieldRadio
🏗 Coming Soon

The <FieldRadio /> component is composed of a <Radio /> component and a <Label /> component. Using <FieldRadio /> allows for rendering validation messages. By default, the label will render to the right of the radio button, however this is adjustable with the inline property.

FieldRadioGroup

Interface of FieldRadioGroup
🏗 Coming Soon

Groups of radios can be displayed with FieldRadioGroup

There are two "inline" variations:

  • The inline prop will put the group label and all the inputs in one line (wrapping the inputs as necessary)
  • The inputsInline prop will stack the group label on top but keep all the inputs inline

default layout

inline layout

Validation message and required

Select at least 1 cheese

Validation message and required

Select at least 1 cheese

everything is disabled

everything is disabled

only one Radio is disabled

only one Radio is disabled

FieldSelect

Interface of FieldSelect
🏗 Coming Soon

The <FieldSelect /> component is composed of an <Select /> component and a <Label /> component. Using <FieldSelect /> allows for rendering validation messages. By default, the label will render directly above the input field, which is the recommended convention, however this is adjustable with the inline property.

FieldSelect Validation

The <FieldSelect /> component accepts validationMessage as a property. This is an object with properties type and message.

This is an error

If you have multiple fields in need of validation, it is recommended that you wrap them in a <Form /> component and pass to it a dictionary with key as field name and value as a ValidationMessage.

Note: In the current implementation, any ValidationMessage set in a <FieldSelect /> component will be overridden by ValidationMessages set in the parent <Form /> component. Because of this, it is highly recommended that you only ever directly set ValidationMessage if a <FieldSelect /> is outside a <Form />.

const options = [
{ value: 'cheddar', label: 'Cheddar' },
{ value: 'gouda', label: 'Gouda' },
{ value: 'swiss', label: 'Swiss' },
]
<FieldSelect
name="someField"
label="Some Field"
options={options}
validationMessage={{ type: 'error', message: 'This is an error' }}
alignValidationMessage="right"
/>

FieldSelectMulti

The <FieldSelectMulti /> component is composed of an <SelectMulti /> component and a <Label /> component.

FieldSelectMulti attributes

<FieldSelectMulti /> have attributes to help display additional information. detail, description and validation messages are available to the component.

detail...

this is the description

This is an error

FieldSelectMulti props

<FieldSelectMulti /> can be set as desabled and also as required. Aslo the width of the component will be 100% based of the parent and sibling components. Using Grid can be helpful to position the components.

this is required

this is disabled

FieldSlider

The <FieldSlider /> component is composed of an <Slider /> component and a <Label /> component. The component also allows for the attributes details and description. This component does not support ValidationMessage

detail
0

description

detail
15

description

detail
0

description

FieldRangeSlider

The <FieldRangeSlider /> component is composed of an <RangeSlider /> component and a <Label /> component. The component also allows for the attributes details and description. This component does not support ValidationMessage

detail
0
10

description

detail

description

detail
0
10

description

FieldText

Interface of FieldText
🏗 Coming Soon

The <FieldText /> component is composed of an <InputText /> component and a <Label /> component. Using <FieldText /> allows for rendering validation messages. By default, the label will render directly above the input field, which is the recommended convention, however this is adjustable with the inline property.

FieldTextArea

Interface of FieldTextArea
🏗 Coming Soon

The <FieldTextArea /> component is composed of <TextArea /> and <Label /> components. Using <FieldTextArea /> allows for rendering validation messages.

Some extra information

FieldText Validation

The <FieldText /> component accepts validationMessage as a property. This is an object with properties type and message.

See ValidationMessage here

If you have multiple fields in need of validation, it is recommended that you wrap them in a <Form /> component and pass to it a dictionary with key as field name and value as a ValidationMessage.

Note: In the current implementation, any ValidationMessage set in a <FieldText /> component will be overridden by ValidationMessages set in the parent <Form /> component. Because of this, it is highly recommended that you only ever directly set ValidationMessage if a <FieldText /> is outside a <Form />.

Validation Error
This is an error

FieldTime

The <FieldTime /> component is composed of an <InputTime /> component and a <Label /> component. It has attributes to help display additional information. detail, description and validation messages are available to the component.

detail
:

this is the description

validation Message

FieldTime props

<FieldTime /> can be set as desabled and also as required.

:
:

FieldTimeSelect

The <FieldTimeSelect /> component is composed of an <InputTimeSelect /> component and a <Label /> component. It has attributes to help display additional information. detail, description and validation messages are available to the component.

detail

this is the description

validation Message

FieldToggleSwitch

Interface of FieldToggleSwitch
🏗 Coming Soon

The <FieldToggleSwitch /> component is composed of a <ToggleSwitch /> component and a <Label /> component. By default, the label will render to the right of the toggle switch, however this is adjustable with the inline property.

hideLabel and fieldsHideLabel

fieldsHideLabel visually hides all child Labels inside a Fieldset, while preserving them in the DOM to improve accessibility.

Additionally, each individual Field accepts a hideLabel prop to hide that single label, or override the containing Fieldset label settings.

This is the Legend 1
This is the Legend 1

ValidationMessage

This component renders a validation message, and is used by Field components after they are validated.