Skip to the content

Pages

Packs

Inputs components

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

View as Markdown

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

The model's answer

<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

The model's answer

<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

The model's answer

<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

The model's answer

<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

The model's answer

<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

The model's answer

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