# Inputs components

> The inputs pack's 6 components: more form fields: star ratings, searchable choices, times, toggle groups, steppers and signatures.

Add it with `packs: ["inputs"]`, or leave `packs` out for every pack.

## RatingInput

A form field: a star rating out of max.

Between its tags: nothing: it closes itself (`<Name ... />`).

| Attribute | Type | Required | Values |
|---|---|---|---|
| `label` | text | yes |  |
| `name` | text |  |  |
| `max` | number |  |  |
| `value` | number |  |  |
| `hint` | text |  |  |
| `required` | true or false |  |  |

```markdown
<Form name="review">
<RatingInput label="How was your stay?" name="stars" value="4" />
<Button>Send review</Button>
</Form>
```
## Combobox

A form field: type to filter the options, or type something new.

Between its tags: nothing: it closes itself (`<Name ... />`).

| Attribute | Type | Required | Values |
|---|---|---|---|
| `label` | text | yes |  |
| `options` | values split by ` | ` | yes |  |
| `name` | text |  |  |
| `placeholder` | text |  |  |
| `value` | text |  |  |
| `hint` | text |  |  |
| `required` | true or false |  |  |

```markdown
<Form name="flight">
<Combobox label="From" name="from" options="LIS Lisbon | OPO Porto | MAD Madrid | BCN Barcelona | CDG Paris" placeholder="Type a city or code" />
<Button>Search</Button>
</Form>
```
## Time

A form field: a time of day as HH:MM.

Between its tags: nothing: it closes itself (`<Name ... />`).

| Attribute | Type | Required | Values |
|---|---|---|---|
| `label` | text | yes |  |
| `name` | text |  |  |
| `value` | text |  |  |
| `min` | text |  |  |
| `max` | text |  |  |
| `hint` | text |  |  |
| `required` | true or false |  |  |

```markdown
<Form name="alarm">
<Time label="Wake me at" name="alarm" value="06:45" />
<Button>Set</Button>
</Form>
```
## ToggleGroup

A form field: options as a row of toggles, one or several chosen.

Between its tags: nothing: it closes itself (`<Name ... />`).

| Attribute | Type | Required | Values |
|---|---|---|---|
| `label` | text | yes |  |
| `options` | values split by ` | ` | yes |  |
| `name` | text |  |  |
| `value` | values split by ` | ` |  |  |
| `multiple` | true or false |  |  |
| `hint` | text |  |  |
| `required` | true or false |  |  |

```markdown
<Form name="classes">
<ToggleGroup label="Which days?" name="days" options="Mon | Tue | Wed | Thu | Fri | Sat" value="Mon | Wed" multiple="true" />
<ToggleGroup label="Level" name="level" options="Beginner | Intermediate | Advanced" value="Intermediate" />
<Button>Save</Button>
</Form>
```
## Stepper

A form field: a whole number with minus and plus.

Between its tags: nothing: it closes itself (`<Name ... />`).

| Attribute | Type | Required | Values |
|---|---|---|---|
| `label` | text | yes |  |
| `name` | text |  |  |
| `value` | number |  |  |
| `min` | number |  |  |
| `max` | number |  |  |
| `step` | number |  |  |
| `unit` | text |  |  |
| `hint` | text |  |  |
| `required` | true or false |  |  |

```markdown
<Form name="trip">
<Stepper label="Travellers" name="travellers" value="2" min="1" max="9" unit="people" />
<Stepper label="Nights" name="nights" value="3" min="1" max="30" />
<Button>Find rooms</Button>
</Form>
```
## Signature

A form field: the user signs with a finger or the mouse.

Between its tags: nothing: it closes itself (`<Name ... />`).

| Attribute | Type | Required | Values |
|---|---|---|---|
| `label` | text | yes |  |
| `name` | text |  |  |
| `hint` | text |  |  |
| `required` | true or false |  |  |

```markdown
<Form name="lease">
<Signature label="Sign to accept the lease" name="signature" required="true" />
<Button>Sign</Button>
</Form>
```