⚠️This version of Waffles Design System is no longer maintained, and was deprecated at the end of 2022. It's main repository is archived. Please migrate your app to the New Waffles.

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.

import { Input, Radio, RadioList } from '@datacamp/waffles-form-elements';
import { useState } from 'react';

function Playground(): JSX.Element {
  const [name, setName] = useState('');
  const [loveLevel, setLoveLevel] = useState('');

  return (
    <form>
      <Input
        label="Full name"
        name="name"
        onChange={setName}
        placeholder="Taylor Swift"
        value={name}
      />
      <RadioList
        name="love-level"
        label="I love waffles components as much as"
        value={loveLevel}
        onChange={setLoveLevel}
      >
        <Radio value="parents">my parents</Radio>
        <Radio value="siblings">my siblings</Radio>
        <Radio value="children">my children</Radio>
      </RadioList>
    </form>
  );
}

import { Input, Radio, RadioList } from '@datacamp/waffles-form-elements';
import { useState } from 'react';

function Playground(): JSX.Element {
  const [name, setName] = useState('');
  const [loveLevel, setLoveLevel] = useState('');

  return (
    <form>
      <Input
        label="Full name"
        name="name"
        onChange={setName}
        placeholder="Taylor Swift"
        value={name}
      />
      <RadioList
        name="love-level"
        label="I love waffles components as much as"
        value={loveLevel}
        onChange={setLoveLevel}
      >
        <Radio value="parents">my parents</Radio>
        <Radio value="siblings">my siblings</Radio>
        <Radio value="children">my children</Radio>
      </RadioList>
    </form>
  );
}

Live

Examples

Simple select

Basic textarea

Multiple checkboxes

Basic switch

Dark mode

Empty switch

Multiple switches

Props

Input

Name	Value	Default	Description
autocomplete	string		Sets the autocomplete attribute on the rendered input element.
className	string		Sets the css className on the rendered element. Can be used to add custom styling.
dataAttributes	object		An object who's keys will be prepended with 'data-', and values will be used as attributes on the rendered element.
description	string		When provided the description will show underneath the label. Only available when 'label' is also specified.
disabled	boolean	false	Disables the input when true.
errorMessage	string		When provided the errorMessage will show underneath the input. Only available when label is also specified.
htmlRequired	boolean		Sets the html attribute "required". Has no visual impact. Use the "required" prop to set visuals if required.
icon	ReactElement		When an icon is provided it will render inside the input. This can only be an component from the @datacamp/waffles-icons package.
id	string		Sets the html id on the rendered input element.
label	string		Renders 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.
max	string \| number		The maximum value of the input.
maxLength	number		Sets the maxLength attribute on the rendered input.
min	string \| number		The minimum value of the input.
name	string	Required	Used to set the html name attribute. Uniquely indentifies the input within the current form context.
onBlur	function		Called when the user removes focus from the input.
onChange	function	Required	Called when the user requests a change to the value of the input. This should be used to set the value.
onFocus	function		Called when the user focuses the input
pattern	string		Pattern option for browser-based validation of HTML inputs.
placeholder	string		The placeholder text to render before the user has entered a value.
required	boolean		It 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.
step	string \| number		The step size for a number input.
title	string		Title text that is shown as an error prompt when pattern validation doesn't match
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.
value	string	Required	The current value of the input. This should be controlled by listening to onChange.
ref	HTMLInputElement		—

Select

Name	Value	Default	Description
children	arrayOf(custom)	Required	—
className	string		Sets the class on the rendered element.
dataAttributes	object		An object who's keys will be prepended with 'data-', and values will be used as attributes on the rendered element.
description	string		When provided the description will show underneath the label. Only available when 'label' is also specified.
disabled	boolean		Disables the Select when true.
errorMessage	string		When provided the errorMessage will show underneath the Select. Only available when label is also specified.
htmlRequired	boolean		Sets the html attribute "required". Has no visual impact. Use the "required" prop to set visuals if required.
id	string		Sets the html id on the rendered select element.
label	string		Renders 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.
name	string	Required	Sets the name attribute on the rendered select.
onBlur	function		Called when the user removes focus from the select.
onChange	function	Required	Called when the user requests a change to the value of the select. This should be used to set the value.
required	boolean		It 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.
value	string	Required	The current value of the select. This should be controlled by listening to onChange.
ref	HTMLSelectElement		—

SelectOption

Name	Value	Default	Description
children	string	Required	The text to display for the option.
disabled	boolean		When true this individual option will not be selectable.
value	string	Required	Unique value for the option. If this matches the value of the parent `Select` then this option will be selected.

RadioList

Name	Value	Default	Description
children	arrayOf(custom)	Required	Takes multiple `Radio` components as children.
description	string		When provided the description will show underneath the label. Only available when 'label' is also specified.
disabled	boolean	false	Disables the whole RadioList when true.
errorMessage	string		When provided the errorMessage will show underneath the RadioList.
label	string	Required	Renders label text above the RadioList.
name	string	Required	Sets the name attribute on the rendered Radio buttons.
onChange	function	Required	Called when the user requests a change to the value of the RadioList. This should be used to set the value.
required	boolean		It 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.
value	string	Required	The current value of the RadioList. This should be controlled by listening to onChange.

Radio

Name	Value	Default	Description
children	string	Required	The text to display for this item.
className	string		Additionaly css className to add to the rendered element
dataAttributes	object		Can be used to set data- html attributes on the element.
disabled	boolean	false	When true this individual option will be disabled. This is overriden when disabled is set on RadioList itself.
htmlRequired	boolean		Sets the html attribute "required". Has no visual impact. Use the "required" prop to set visuals if required.
value	string	Required	The value of this option. If this matches the value provided to the parent `RadioList`, this option will be selected.

CheckboxList

Name	Value	Default	Description
children	arrayOf(custom)	Required	Takes multiple `Checkbox` components as children.
description	string		When provided the description will show underneath the label. Only available when 'label' is also specified.
disabled	boolean	false	Disables the whole CheckboxList when true.
errorMessage	string		When provided the errorMessage will show underneath the CheckboxList.
label	string	Required	Renders label text above the CheckboxList.
name	string	Required	Sets the name attribute on the rendered Checkbox buttons.
onChange	function	Required	Called when the user requests a change to the value of the CheckboxList. This should be used to set the value.
required	boolean		It 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.
value	string	Required	The current value of the CheckboxList. This should be controlled by listening to onChange.

Checkbox

Name	Value	Default	Description
children	string	Required	The text to display for this item.
dataAttributes	object		Can be used to set data- html attributes on the element.
disabled	boolean	false	When true this individual option will be disabled. This is overriden when disabled is set on CheckboxList itself.
value	string	Required	The value of this option. If this matches the value provided to the parent `CheckboxList`, this option will be selected.

TextArea

Name	Value	Default	Description
autocomplete	string		Sets the autocomplete attribute on the rendered input element.
className	string		Sets the css className on the rendered element. Can be used to add custom styling.
dataAttributes	object		An object who's keys will be prepended with 'data-', and values will be used as attributes on the rendered element.
description	string		When provided the description will show underneath the label. Only available when 'label' is also specified.
disabled	boolean	false	Disables the input when true.
errorMessage	string		When provided the errorMessage will show underneath the input. Only available when label is also specified.
htmlRequired	boolean		Sets the html attribute "required". Has no visual impact. Use the "required" prop to set visuals if required.
id	string		Sets the html id on the rendered input element.
label	string		Renders 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.
maxLength	number		Sets the maxLength attribute on the rendered input.
min	'string' \| 'number'		The minimum value of the input.
name	string	Required	Used to set the html name attribute. Uniquely indentifies the input within the current form context.
onBlur	function		Called when the user removes focus from the input.
onChange	function	Required	Called when the user requests a change to the value of the input. This should be used to set the value.
placeholder	string		The placeholder text to render before the user has entered a value.
required	boolean		It 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.
rows	number	2	The number of visible lines of text. This contols the height of the TextArea.
value	string	Required	The current value of the input. This should be controlled by listening to onChange.
ref	HTMLTextAreaElement		—

Switch

Name	Value	Default	Description
appearance	'default' \| 'inverted'	'default'	When the appearance is "inverted", the text color and toggle background color will be white for use on dark backgrounds.
checked	boolean		Whether switch toggle is turned on or off.
children	ReactNode		Text description of the switch element. If switch has no description aria-label should be provided.
className	string		Sets 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.
disabled	boolean		Disables the switch element.
onChange	HTMLInputElement		Called when the user requests a change to the value of the switch. In most cases should be used to set the checked property.
ref	HTMLInputElement		—

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';