Ui.Field

A simple form field component.

Interactive Demo

You can play around with a Ui.Field below using the controls.

Label
Error message....
Orientation
Vertical
label
Error
<Ui.Field
error={Maybe.Just("Error message....")}
orientation={Ui.Field.Vertical}
label="Label">
<Ui.Input placeholder="Content..."/>
</Ui.Field>
Content

Children passed will be displayed between the label and the error.

E-mail
Textarea
Div content
Content...
<>
<Ui.Field label="E-mail"><Ui.Input placeholder="user@example.com"/></Ui.Field>
<Ui.Field label="Textarea"><Ui.Textarea placeholder="Content..."/></Ui.Field>
<Ui.Field label="Div content"><div>"Content..."</div></Ui.Field>
</>
Label

The label can be controlled using the label property.

E-mail
Name
<>
<Ui.Field label="E-mail"><Ui.Input placeholder="user@example.com"/></Ui.Field>
<Ui.Field label="Name"><Ui.Input placeholder="User"/></Ui.Field>
</>
Error

The error message can be controlled using the error property.

E-mail
Invalid E-mail
<Ui.Field error={Maybe.Just("Invalid E-mail")} label="E-mail">
<Ui.Input placeholder="user@example.com"/>
</Ui.Field>
Orientation

The field supports either Vertical,Horizontal or HorizontalReverse orientation.

The Horizontal and HorizontalReverse orientations are generally for smaller inputs like checkboxes.

E-mail
Checkbox
Checkbox
<>
<Ui.Field orientation={Ui.Field.Vertical} label="E-mail">
<Ui.Input placeholder="user@example.com"/>
</Ui.Field>
<Ui.Field orientation={Ui.Field.Horizontal} label="Checkbox"><Ui.Checkbox/></Ui.Field>
<Ui.Field orientation={Ui.Field.HorizontalReverse} label="Checkbox">
<Ui.Checkbox/>
</Ui.Field>
</>
Mint UI

Mint UI is a design system and component library for building websites, web and desktop applications.

Copyright © 2018-2024 Szikszai Gusztáv. All rights reserved.