Form

Form is used to handle forms, inputs and labels.

(Text: )

import { useState } from 'react';
import { Form } from 'react-breeze';

const [text, setText] = useState('');
<Form.Input placeholder="Placeholder..." onChange={(e) => setText(e.target.value)} />
<p>(Text: {text})</p>

Input

Input is used the same way as the default input, but is stylized:

Error

Input can be given an error to be displayed:

import { Form } from 'react-breeze';

<Form.Input error />;

onEnter

Input can be given an onEnter event:

import { Form } from 'react-breeze';

<Form.Input onEnter={() => alert('Enter key pressed')} />;

Ref

Under the hood, Input uses forwardRef, which allows you to do:

import { useRef } from 'react';
import { Form } from 'react-breeze';

const ref = useRef(null);
<Form.Input ref={ref} />
<Button onClick={() => ref.current.focus()}>Focus</Button>

Label

Label is used to display a label, with a corrected style.

Group

Group is used to set ids for label & linked input.

Properties

Input

Input takes the same properties as an, but can also be given:

Name	Type	Default	Required	Description
colors	[string, string, string]	[gray, blue, red]		Set the border color for the states: default, focus, error
error	boolean	false		Display error
onEnter	Function	undefined		Trigger when user press Enter key

Label

Input takes the same properties as a label.

Group

Group takes the following properties:

Name	Type	Default	Required	Description
id	string	undefined	required	Assign id & for to label & input
children	Component	undefined	required	Components to be linked together