Ui.Picker

A component for implementing custom pickers (date, select, color, etc...).
It consists of an element which when click opens a dropdown (in mobile resolutions a modal).

It handles the following interactions:

  • Clicking on the element opens the dropdown.
  • Clicking outside of the element or dropdown hides the dropdown.
  • Clicking in the dropdown does not hide the dropdown.
  • Keyboard focusing the element does not open the dropdown.
  • Enter hides the dropdown if the handler returns true.
  • Space shows the dropdown.
  • Esc hides the dropdown.
Interactive Demo

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

Pick something!
Placeholder
Label
Icon
Chevron Down
Position
BottomLeft
Offset (10px)
Size (16px)
Match Width
Disabled
Invalid
<Ui.Picker
placeholder="Pick something!"
position={Ui.Position.BottomLeft}
icon={Ui.Icons:CHEVRON_DOWN}
label={Maybe.Nothing}
size={Ui.Size.Px(16)}
panel=<>"Panel"</>
matchWidth={false}
disabled={false}
invalid={false}
offset={10}/>
Panel

The content inside the panel can be set using the panel property.

Pick something!
Pick something!
<>
<Ui.Picker placeholder="Pick something!" panel=<>"Panel..."</>/>
<Ui.Picker
placeholder="Pick something!"
panel={<Ui.Button label="Click me!"/>}
/>
</>
Label

The label label property is shown in the element if given. It is used to indicate that a value has been picked.

Label...
Pick something!
<>
<Ui.Picker
label={Maybe.Just(<>"Label..."</>)}
placeholder="Pick something!"
panel=<>"Panel..."</>
/>
<Ui.Picker
placeholder="Pick something!"
label={Maybe.Nothing}
panel=<>"Panel..."</>
/>
</>
Placeholder

The placeholder can be changed with the placeholder property.

Pick something!
<Ui.Picker placeholder="Pick something!" panel=<>"Panel..."</>/>
Size

The size of the component can be set with the size property.

Pick something!
Pick something!
Pick something!
<>
<Ui.Picker
placeholder="Pick something!"
size={Ui.Size.Px(12)}
panel=<>"Panel..."</>
/>
<Ui.Picker
placeholder="Pick something!"
size={Ui.Size.Px(16)}
panel=<>"Panel..."</>
/>
<Ui.Picker
placeholder="Pick something!"
size={Ui.Size.Px(20)}
panel=<>"Panel..."</>
/>
</>
Icon

An icon can be displayed in the right side of the element, which is usually used to indicate that the picker a dropdown.

Pick something!
Pick something!
<>
<Ui.Picker
placeholder="Pick something!"
icon={Ui.Icons.CHEVRON_DOWN}
panel=<>"Panel..."</>
/>
<Ui.Picker
placeholder="Pick something!"
icon={Ui.Icons.BEAKER}
panel=<>"Panel..."</>
/>
</>
Position

The position of the panel can be controlled with the position property.

Top Left
Top Center
Top Right
Bottom Left
Bottom Center
Bottom Right
<Ui.Grid>
<Ui.Picker
position={Ui.Position.TopLeft}
placeholder="Top Left"
panel=<>"Panel..."</>
/>
<Ui.Picker
position={Ui.Position.TopCenter}
placeholder="Top Center"
panel=<>"Panel..."</>
/>
<Ui.Picker
position={Ui.Position.TopRight}
placeholder="Top Right"
panel=<>"Panel..."</>
/>
<Ui.Picker
position={Ui.Position.BottomLeft}
placeholder="Bottom Left"
panel=<>"Panel..."</>
/>
<Ui.Picker
position={Ui.Position.BottomCenter}
placeholder="Bottom Center"
panel=<>"Panel..."</>
/>
<Ui.Picker
position={Ui.Position.BottomRight}
placeholder="Bottom Right"
panel=<>"Panel..."</>
/>
</Ui.Grid>
Offset

The offset of the panel can be controlled with the offset property.

Pick Something!
Pick Something!
Pick Something!
<>
<Ui.Picker placeholder="Pick Something!" panel=<>"Panel..."</> offset={5}/>
<Ui.Picker placeholder="Pick Something!" panel=<>"Panel..."</> offset={10}/>
<Ui.Picker placeholder="Pick Something!" panel=<>"Panel..."</> offset={20}/>
</>
Match Width

Whether or not the panel should match the width the element can be controlled with the matchWidth property.

Pick something!
Pick something!
<>
<Ui.Picker
placeholder="Pick something!"
panel=<>"Panel..."</>
matchWidth={false}
/>
<Ui.Picker
placeholder="Pick something!"
panel=<>"Panel..."</>
matchWidth={true}
/>
</>
Disabled

The component can be disabled using the disabled property.

Pick something!
<Ui.Picker placeholder="Pick something!" panel=<>"Panel..."</> disabled={true}/>
Invalid

The component can be marked invalid using the invalid property.

Pick something!
<Ui.Picker placeholder="Pick something!" panel=<>"Panel..."</> invalid={true}/>
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.
Panel
Panel...
Panel...
Panel...
Panel...
Panel...
Panel...
Panel...
Panel...
Panel...
Panel...
Panel...
Panel...
Panel...
Panel...
Panel...
Panel...
Panel...
Panel...
Panel...
Panel...
Panel...
Panel...