Form and FormField

Form

Form is collection of input components containing their united value(s) state and capable of submitting this state.

Example

import {useCallback} from 'react';
import {Form as KovalForm, InputText, Button, FormField} from 'koval-ui';
export default () => {
  const handleSubmit = useCallback((event, formState) => {
    console.log('Submit event', event);
    console.log('formState', formState);
  }, [])
  const handleInvalid = useCallback((event, formState) => {
    console.log('Invalid event', event);
    console.log('formState', formState);
  }, [])
  const handleReset = useCallback((event, formState) => {
    console.log('Reset event', event);
    console.log('formState', formState);
  }, [])
  const handleChange = useCallback((event, formState) => {
    console.log('Change event', event);
    console.log('formState', formState);
  }, [])
  return (
    <KovalForm
      onSubmit={handleSubmit}
      onInvalid={handleInvalid}
      onReset={handleReset}
      onChange={handleChange}>
        <FormField
          label="Clickable label"
          hint="This is hint">
          <InputText name="text" placeholder="Example input" />
        </FormField>
        <div>
          <Button type="submit">Submit</Button>
        </div>
    </KovalForm>
  );
};

Terminal

Open Sandbox

Form story

FormField

The FormField component is designed to enhance the accessibility and usability of form inputs. It wraps a provided input element or an InputGroup and ensures that an accessible label is rendered above the input and a hint is displayed below it.

Example

import {useCallback} from 'react';
import {FormField, InputColor} from 'koval-ui';
export default function Example() {
  return (
    <FormField
      label="Clickable label"
      hint="This is hint">
      <InputColor defaultValue="#CECECE" />
    </FormField>
  );
};

Open Sandbox

💡️

See all FormField features at Storybook page (opens in a new tab).

Manage input group Input capture API