Form-elements

@happeouikit/form-elements

yarn add @happeouikit/form-elements

Input

Number Input

Dropdown

Switch

Checkbox

CheckboxGroup

Use the CheckboxGroup component if you want to manipulate multiple checkboxes more conveniently.

A bunch of checkboxes under CheckboxGroup will act as a single input component and will have a "united" state:

• As a value, it will have an array of selected options ["first", "third"]
• It will pass array of selected options to onChange events

You can pass onChange event to the specific option or to the CheckboxGroup

String options are also valid

You can also wrap Checkbox components instead of using options prop

Pass defaultValue prop to preselect some of the options

RadioButton

Textarea

Textarea supports autoHeight property with maxHeight. It will automatically extend the textarea to fit in the text.

Tag

Badge

Date Time Picker

Date Picker

DatePicker requires a bit to set up. Usually you would just pass a value prop to the element, however you should either use the prop.value or prop.date.to properties. This is because the DatePicker supports both single value and range selection.

So keep the following rule in mind:

• Single value selection, use value
• Range selection, use date & include the type of input from|to

Single value

Range select

Props

Link and LinkExternal

The ref property (if given) is forwarded to the wrapped <a> element.

Props

Typeahead

Typeahead component renders a dropdown of search results. It allows to run a custom backend query for each search.

Search and keep the selected result

Search and clear input on select

Show error on select

Props