Waffles
© 2021 DataCamp, Inc.

components

Form Elements

A collection of common form elements.

Overview

Waffles exposes several form elements:

  • Input – Able to handle multiple types of text input.
  • Select – Allows the user to select one from a list of options.
  • SelectOption - To be used within a Select to specify an available option.
  • RadioList – Allows the user to choose one from a list of options.
  • Radio - To be used within a RadioList to specify an available option.
  • CheckboxList – Allows the user to choose multiple from a list of options.
  • Checkbox - To be used within a CheckboxList to specify an available option.
  • TextArea - Able to handle longer form text input.
  • Switch - Allow the user to turn an individual option on or off. Should be used when the instant response of applied settings is required without additional action. Could be used outside of form context as well.
Live

Examples

Simple select

Basic textarea

Multiple checkboxes

What features should Waffles have?

Basic switch

Empty switch

Multiple switches

Props

Input

NameValueDefaultDescription
autocompletestringSets the autocomplete attribute on the rendered input element.
classNamestringSets the css className on the rendered element. Can be used to add custom styling.
dataAttributesobjectAn object who's keys will be prepended with 'data-', and values will be used as attributes on the rendered element.
descriptionstringWhen provided the description will show underneath the label. Only available when 'label' is also specified.
disabledbooleanfalseDisables the input when true.
errorMessagestringWhen provided the errorMessage will show underneath the input. Only available when label is also specified.
htmlRequiredbooleanSets the html attribute "required". Has no visual impact. Use the "required" prop to set visuals if required.
iconReactElementWhen an icon is provided it will render inside the input. This can only be an component from the @datacamp/waffles-icons package.
idstringSets the html id on the rendered input element.
labelstringRenders label text above the input. If this is not provided the input will render inline. When a label is provided many other props are also available and this component becomes a block that can be stacked with other form elements.
maxstring | numberThe maximum value of the input.
maxLengthnumberSets the maxLength attribute on the rendered input.
minstring | numberThe minimum value of the input.
namestringRequiredUsed to set the html name attribute. Uniquely indentifies the input within the current form context.
onBlurfunctionCalled when the user removes focus from the input.
onChangefunctionRequiredCalled when the user requests a change to the value of the input. This should be used to set the value.
onFocusfunctionCalled when the user focuses the input
placeholderstringThe placeholder text to render before the user has entered a value.
requiredbooleanIt defines wheter the input field is required or not. If required=true it adds the text 'Required' on the top-right of the input, if required=false it adds 'Optional'. The default value is undefined, which doesn't add anything. This is only available when 'label' is also provided.
size'small' | 'medium' | 'large''medium'The size of the input element.
stepstring | numberThe step size for a number input.
type'text' | 'date' | 'datetime-local' | 'email' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'time' | 'url' | 'week''text'The type of input to render. This corresponds to a set of html input types.
valuestringRequiredThe current value of the input. This should be controlled by listening to onChange.
refHTMLInputElement

Select

NameValueDefaultDescription
childrenarrayOf(custom)Required
classNamestringSets the class on the rendered element.
dataAttributesobjectAn object who's keys will be prepended with 'data-', and values will be used as attributes on the rendered element.
descriptionstringWhen provided the description will show underneath the label. Only available when 'label' is also specified.
disabledbooleanDisables the Select when true.
errorMessagestringWhen provided the errorMessage will show underneath the Select. Only available when label is also specified.
htmlRequiredbooleanSets the html attribute "required". Has no visual impact. Use the "required" prop to set visuals if required.
idstringSets the html id on the rendered select element.
labelstringRenders label text above the Select. If this is not provided the Select will render inline. When a label is provided many other props are also available and this component becomes a block that can be stacked with other form elements.
namestringRequiredSets the name attribute on the rendered select.
onBlurfunctionCalled when the user removes focus from the select.
onChangefunctionRequiredCalled when the user requests a change to the value of the select. This should be used to set the value.
requiredbooleanIt defines wheter the select field is required or not. If required=true it adds the text 'Required' on the top-right of the select, if required=false it adds 'Optional'. The default value is undefined, which doesn't add anything. This is only available when 'label' is also provided.
size'small' | 'medium' | 'large'The size of the select element.
valuestringRequiredThe current value of the select. This should be controlled by listening to onChange.
refHTMLSelectElement

SelectOption

NameValueDefaultDescription
childrenstringRequiredThe text to display for the option.
disabledbooleanWhen true this individual option will not be selectable.
valuestringRequiredUnique value for the option. If this matches the value of the parent `Select` then this option will be selected.

RadioList

NameValueDefaultDescription
childrenarrayOf(custom)RequiredTakes multiple `Radio` components as children.
descriptionstringWhen provided the description will show underneath the label. Only available when 'label' is also specified.
disabledbooleanfalseDisables the whole RadioList when true.
errorMessagestringWhen provided the errorMessage will show underneath the RadioList.
labelstringRequiredRenders label text above the RadioList.
namestringRequiredSets the name attribute on the rendered Radio buttons.
onChangefunctionRequiredCalled when the user requests a change to the value of the RadioList. This should be used to set the value.
requiredbooleanIt defines whether the RadioList is required or not. If required=true it adds the text 'Required' on the top-right of the RadioList, if required=false it adds 'Optional'. The default value is undefined, which doesn't add anything.
valuestringRequiredThe current value of the RadioList. This should be controlled by listening to onChange.

Radio

NameValueDefaultDescription
childrenstringRequiredThe text to display for this item.
classNamestringAdditionaly css className to add to the rendered element
disabledbooleanfalseWhen true this individual option will be disabled. This is overriden when disabled is set on RadioList itself.
htmlRequiredbooleanSets the html attribute "required". Has no visual impact. Use the "required" prop to set visuals if required.
valuestringRequiredThe value of this option. If this matches the value provided to the parent `RadioList`, this option will be selected.

CheckboxList

NameValueDefaultDescription
childrenarrayOf(custom)RequiredTakes multiple `Checkbox` components as children.
descriptionstringWhen provided the description will show underneath the label. Only available when 'label' is also specified.
disabledbooleanfalseDisables the whole CheckboxList when true.
errorMessagestringWhen provided the errorMessage will show underneath the CheckboxList.
labelstringRequiredRenders label text above the CheckboxList.
namestringRequiredSets the name attribute on the rendered Checkbox buttons.
onChangefunctionRequiredCalled when the user requests a change to the value of the CheckboxList. This should be used to set the value.
requiredbooleanIt defines whether the CheckboxList is required or not. If required=true it adds the text 'Required' on the top-right of the CheckboxList, if required=false it adds 'Optional'. The default value is undefined, which doesn't add anything.
valuestringRequiredThe current value of the CheckboxList. This should be controlled by listening to onChange.

Checkbox

NameValueDefaultDescription
childrenstringRequiredThe text to display for this item.
disabledbooleanfalseWhen true this individual option will be disabled. This is overriden when disabled is set on CheckboxList itself.
valuestringRequiredThe value of this option. If this matches the value provided to the parent `CheckboxList`, this option will be selected.

TextArea

NameValueDefaultDescription
autocompletestringSets the autocomplete attribute on the rendered input element.
classNamestringSets the css className on the rendered element. Can be used to add custom styling.
dataAttributesobjectAn object who's keys will be prepended with 'data-', and values will be used as attributes on the rendered element.
descriptionstringWhen provided the description will show underneath the label. Only available when 'label' is also specified.
disabledbooleanfalseDisables the input when true.
errorMessagestringWhen provided the errorMessage will show underneath the input. Only available when label is also specified.
htmlRequiredbooleanSets the html attribute "required". Has no visual impact. Use the "required" prop to set visuals if required.
idstringSets the html id on the rendered input element.
labelstringRenders label text above the input. If this is not provided the input will render inline. When a label is provided many other props are also available and this component becomes a block that can be stacked with other form elements.
maxLengthnumberSets the maxLength attribute on the rendered input.
min'string' | 'number'The minimum value of the input.
namestringRequiredUsed to set the html name attribute. Uniquely indentifies the input within the current form context.
onBlurfunctionCalled when the user removes focus from the input.
onChangefunctionRequiredCalled when the user requests a change to the value of the input. This should be used to set the value.
placeholderstringThe placeholder text to render before the user has entered a value.
requiredbooleanIt defines wheter the input field is required or not. If required=true it adds the text 'Required' on the top-right of the input, if required=false it adds 'Optional'. The default value is undefined, which doesn't add anything. This is only available when 'label' is also provided.
rowsnumber2The number of visible lines of text. This contols the height of the TextArea.
valuestringRequiredThe current value of the input. This should be controlled by listening to onChange.
refHTMLTextAreaElement

Switch

NameValueDefaultDescription
appearance'default' | 'inverted''default'When the appearance is "inverted", the text color and toggle background color will be white for use on dark backgrounds.
checkedbooleanWhether switch toggle is turned on or off.
childrenReactNodeText description of the switch element. If switch has no description aria-label should be provided.
classNamestringSets the CSS class on the switch wrapper element. It's used by emotion when applying custom styling. Could be used as an escape hatch to apply regular CSS rules.
disabledbooleanDisables the switch element.
onChangeHTMLInputElementCalled when the user requests a change to the value of the switch. In most cases should be used to set the checked property.
refHTMLInputElement

Besides that Switch accepts all props regular HTML checkbox would accept, such as name, value, id, data-testid, to name a few.

Imports

You can import following components or utilities from this module:

import {
Input,
Select,
SelectOption,
RadioList,
CheckboxList,
Radio,
RadioIcon,
Checkbox,
Label,
TextArea,
Switch,
} from '@datacamp/waffles-form-elements';