Ui.Native.Select

A wrapper around the browser native select input.

Interactive Demo

You can play around with a Ui.Native.Select below using the controls:

Helium
Placeholder
Value
Disabled
Invalid
Size (16px)
<Ui.Native.Select
placeholder="Select an element..."
size={Ui.Size.Px(16)}
options={ELEMENTS}
disabled={false}
invalid={false}
value="helium"/>
Value

The selected item can be controlled with the value property.

It must match the key of the item you want to select.

Item 1
<Ui.Native.Select
value="item_1"
items=[
Ui.ListItem.Item(content: <>"Item 1"</>, matchString: "Item 1", key: "item_1"),
Ui.ListItem.Item(content: <>"Item 2"</>, matchString: "Item 2", key: "item_2"),
Ui.ListItem.Item(content: <>"Item 3"</>, matchString: "Item 3", key: "item_3")
]
/>
Placeholder

The placeholder can be changed with the placeholder property. It is only visible if none of items match the given value.

Select an item...
<Ui.Native.Select placeholder="Select an item..."/>
Size

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

Item 1
Item 1
Item 1
<>
<Ui.Native.Select
size={Ui.Size.Px(12)}
value="item_1"
items=[
Ui.ListItem.Item(
content: <>"Item 1"</>,
matchString: "Item 1",
key: "item_1")
]
/>
<Ui.Native.Select
size={Ui.Size.Px(16)}
value="item_1"
items=[
Ui.ListItem.Item(
content: <>"Item 1"</>,
matchString: "Item 1",
key: "item_1")
]
/>
<Ui.Native.Select
size={Ui.Size.Px(20)}
value="item_1"
items=[
Ui.ListItem.Item(
content: <>"Item 1"</>,
matchString: "Item 1",
key: "item_1")
]
/>
</>
Disabled

The component can be disabled using the disabled property.

Disabled...
<Ui.Native.Select placeholder="Disabled..." disabled={true}/>
Invalid

The component can be marked invalid using the invalid property.

Invalid...
<Ui.Native.Select placeholder="Invalid..." 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.