Form / From elements

Let's start with Kodhus input elements.

Input

Kodhus supports 2 styles for input element.

Let's take a look at examples:

Normal input

import { FormControl, Input } from 'kodhus-ui-react';

<FormControl>
  <label>Username</label>
  <Input />
</FormControl>

Error input

import { FormControl, Input } from 'kodhus-ui-react';

<FormControl>
  <label>Password</label>
  <Input type='error' />
  <label>Something wrong</label>
</FormControl>

Inline form

If you want input and label be on the same row:

Checkbox

You can use checkboxes in forms and in preferences.

Let's take a look at an example:

import { FormControl, Checkbox } from 'kodhus-ui-react';

<FormControl>
  <Checkbox label='Are you strong or weak?' />
</FormControl>

Radio button

Radio buttons are usually used in forms.

import { FormControl, Radio } from 'kodhus-ui-react';

<FormControl>
  <Radio label='Are you strong or weak?' />
</FormControl>

Switch / Toggle

Toggles are used in cases where you need to enable/disable a state. They can be used instead of checkboxes in settings and preferences sections.

import { FormControl, Toggle } from 'kodhus-ui-react';

<FormControl>
  <Toggle label='Are you strong or weak?' />
</FormControl>