Field

Notes

A form field with floating labels and validation support.

Props

  • childrennode*

    Text or element(s) used as children of the field's label element.

  • classNamestring
  • customFieldStatusbool

    A flag indicating that the field uses a custom element to display field status and should not wrap error messages in a FieldStatus component.

  • defaultValuestring
  • displayStatusbool

    A flag indicating that the field should display its error message irrespective of the field's error status. If set to true, the error message will display no matter what. If set to false, it will never display.

  • errorbool

    A flag indicating that the field is in an error state.

  • errorMessagenode

    A message to display when the field is in an error state. Wrapped in a FieldStatus component by default.

  • floatLabelIdstring

    Optional id to be set on the associated label, can be useful for creating accessibility relationships between elements

  • idstring*
  • inputAddonnode

    An additional element rendered within the field after the input element. Used to apply extra buttons and labels on the edges of fields.

  • containerPropsobject

    Props applied to the field's outer container.

  • namestring
  • onChangefunc
  • onBlurfunc
  • onFocusfunc
  • requiredbool
  • typestring['text']
  • valuestring

Field - Toggle error prop to true to see error message

Mutliple fields arranged vertically

Fields respond automatically to Themes

Please enter an email address
Please enter an email address

FieldStatus

Notes

Displays validation messages for form fields. Used by default in the Field component.

Props

  • childrennode
  • classNamestring
  • errorbool

    Current error status. Pass true to mark as an error, false to mark that the field is valid, or leave undefined for an indeterminate default state.

Please enter a valid email address

FormContainer

Notes

A wrapping component for managing field state and form submission. FormContainer creates no UI, but passes it's props on to its child, which is typically a form element. It receives a fields configuration prop, and decorates it as fieldsState. Each field gains dynamic error, wasChanged, and wasValid properties. A nested input object maintains properties for the field's associated input. i.e. id, name, required, value, onChange, onBlur. Every change event in the child form triggers a re-render with updated field state (including validation).

Props

  • childrennode[<div />]
  • fields
    shape {
    requiredbool
    validatorfunc
    inputobject
    }
    [{}]

    An object to configure fields using input names as the key.

    Validation can specified for each field in the following ways:

    • required: true (default) uses the validateExistence as validator
    • required: false no validation
    • validator A custom validator function
  • focusOnSubmitErrorbool

    Set focus on the first invalid input during submittals.

  • onErrorfunc[() => {}]

    Callback for invalid form submittals. Invoked with validation results for invalid fields.

  • onFieldsStateChangefunc[() => {}]

    Callback for when the field state has changed. Invoked with fieldsState, oldFieldsState

  • onFieldUpdateFromEventfunc[() => {}]

    Callback for a when field has been updated from a dom event. Invoked with the event, fieldState.

  • onSubmitfunc[() => {}]

    Callback for valid form submittals. Invoked with form data.

  • focusOnInvalidAfterAnimationbool

    Forces focusOnFirstInvalid to wait for animations so that focus can be properly applied.

EditField

Notes

EditField supports a callback that allows a consumer to provide any custom mechanism for populating a list of values in a field-like element. It is not a text-editable field component, but appears visually similar to one.

Props

  • buttonLabelany['Edit']

    Text or element used as the label for the EditField button. Defaults to 'Edit'. This value should be screen reader friendly, so it may make sense to use the hiddenVisually class to provide extra context on the button. For example:

    buttonLabel={ (
     <span>
       Edit <span className='hiddenVisually'>milk options</span>
     </span>
    ) }
  • childrennode*

    Text or element passed to a child component to form a "label" that is actually just a span

  • containerPropsobject[{}]

    Props applied to the field's outer container.

  • listPropsobject[{}]

    Props applied to the list element.

  • onClickfunc*

    A custom function that will update or populate the listed values. Clicks are handled by the wrapper div, so that the user may click anywhere in the field (not just on the button).

  • listItemsarray

    An array of elements or strings rendered inside html list item elements. When present, the FloatLabel will shift into its active position.

With no list items:

Fill me in

    With list items:

    Milk
    • No foam
    • 2%
    • Truncate this really long name for me please

    Select

    Notes

    A select component that leverages the browser's built in select, layering on a styled label and presentation for the currently selected option.

    Props

    • childrennode*

      option elements associated with the select element.

    • classNamestring
    • customFieldStatusbool

      A flag indicating that the field uses a custom element to display field status and should not wrap error messages in a FieldStatus component.

    • displayStatusbool

      A flag indicating that the field should display its error message irrespective of the field's error status. If set to true, the error message will display no matter what. If set to false, it will never display.

    • errorbool

      A flag indicating that the field is in an error state.

    • errorMessagenode

      A message to display when the field is in an error state. Wrapped in a FieldStatus component by default.

    • idstring
    • labelstring*
    • namestring
    • onChangefunc
    • valuestring
    • selectedOptionFormatterfunc

      A function allowing the select component's getSelectedOption to pass a custom text for the selected option. Returns custom text.

    Please select a month other than March.

    Checkbox

    Notes

    Props

    • errorbool

      A flag indicating that the checkbox is in an error state.

    • errorMessagenode

      A message to display when the checkbox is in an error state. Wrapped in a FieldStatus component by default.

    Radio

    Notes

    Props

    • errorbool

      A flag indicating that the radio input is in an error state.

    • errorMessagenode

      A message to display when the radio input is in an error state. Wrapped in a FieldStatus component by default.

    RadioGroup

    Notes

    An optional wrapper for groups of radio inputs. Passes name, required, onChange handler, and current checked status based on the value prop to any child radio inputs.

    Props

    • childrennode

      Components to be wrapped. Radio components and input elements with type="radio" have name, onChange, checked, and required passed to them. Other elements are passed through as-is.

    • namestring
    • onChangefunc
    • requiredbool
    • valuestring

      The value of the currently selected radio button. A convenient way to handle controlled radio inputs. If the value property of the radio input matches the passed in value, that input will be checked.

    • legendstring*

      Required description of radio buttons. Helpful for accessibility.

    card options

    SegmentedControl

    Notes

    A pre-styled control that allows for multiple values in a tabbable-fashion (one selected at a time)

    Props

    • visualStyleoneOf('default', 'dark', 'inverted')['default']

      Controls the visual style of the component

    • inputs
      arrayOf [
      shape {
      displayNamestring*

      The displayed text of the input

      valuestring*

      The value of the input

      iconPathstring

      The path of the icon to be used

      }
      ]
      *

      The inputs fields passed to the SegmentedControl. The number of inputs (objects) in the array determines the number of options shown within the SegmentedControl component.

    • onValueChangefunc*

      A function called when the selected value of the the SegmentedControl changes (when an individual control is clicked). This function receives the value defined in the inputs prop

    • selectedValuestring

      The currently selected value--the selected value will be highlighted

    • classNamestring

      The classes applied to the container component

    Toggle

    Notes

    A toggle for choice actions.

    Props

    • classNamestring
    • typestring['checkbox']