Ui.Select

An input for selecting one element from a list using a dropdown.

It uses the Ui.Picker and Ui.InteractiveList to create a select box.

Interactive Demo

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

Select an element...
Placeholder
Value
Position
BottomLeft
Offset (10px)
Size (16px)
Match Width
Disabled
Invalid
<Ui.Select
position={Ui.Position.BottomLeft}
placeholder="Select an element..."
size={Ui.Size.Px(16)}
items={ELEMENTS}
matchWidth={false}
disabled={false}
invalid={false}
offset={10}/>
Items

The component displays items which are provided using the items property.

Select something!
<Ui.Select
placeholder="Select something!"
items=[
Ui.ListItem.Item(
content: <>"Something"</>,
matchString: "something",
key: "something"),
Ui.ListItem.Item(
content: <>"An other thing"</>,
matchString: "an other thing",
key: "an-other-thing")
]
/>
Value

The selected item can be controlled using the value property.

Something
<Ui.Select
value="something"
items=[
Ui.ListItem.Item(
content: <>"Something"</>,
matchString: "something",
key: "something"),
Ui.ListItem.Item(
content: <>"An other thing"</>,
matchString: "an other thing",
key: "an-other-thing")
]
/>
Size

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

Select something!
Select something!
Select something!
<>
<Ui.Select
placeholder="Select something!"
size={Ui.Size.Px(12)}
items={ELEMENTS}
/>
<Ui.Select
placeholder="Select something!"
size={Ui.Size.Px(16)}
items={ELEMENTS}
/>
<Ui.Select
placeholder="Select something!"
size={Ui.Size.Px(20)}
items={ELEMENTS}
/>
</>
Invalid

The component can be marked invalid using the invalid property.

Select something!
<Ui.Select placeholder="Select something!" items={ELEMENTS} invalid={true}/>
Disabled

The component can be marked disabled using the disabled property.

Select something!
<Ui.Select placeholder="Select something!" items={ELEMENTS} disabled={true}/>
Placeholder

The placeholder can be changed with the placeholder property.

Select something!
<Ui.Select placeholder="Select something!" items={ELEMENTS}/>
Match Width

Whether or not the panel should match the width the element can be controlled with the matchWidth property. For more information check out the same property of the Ui.Dropdown

Position

The position property controls the panels position. For more information check out the the same property of the Ui.Dropdown

Offset

The offset property controls the panels offset. For more information check out the the same property of the Ui.Dropdown

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.
Hydrogen
Helium
Lithium
Beryllium
Boron
Carbon
Nitrogen
Oxygen
Fluorine
Neon
Sodium
Magnesium
Aluminum
Silicon
Phosphorus
Sulfur
Chlorine
Argon
Potassium
Calcium
Scandium
Titanium
Vanadium
Chromium
Manganese
Iron
Cobalt
Nickel
Copper
Zinc
Something
An other thing
Something
An other thing
Hydrogen
Helium
Lithium
Beryllium
Boron
Carbon
Nitrogen
Oxygen
Fluorine
Neon
Sodium
Magnesium
Aluminum
Silicon
Phosphorus
Sulfur
Chlorine
Argon
Potassium
Calcium
Scandium
Titanium
Vanadium
Chromium
Manganese
Iron
Cobalt
Nickel
Copper
Zinc
Hydrogen
Helium
Lithium
Beryllium
Boron
Carbon
Nitrogen
Oxygen
Fluorine
Neon
Sodium
Magnesium
Aluminum
Silicon
Phosphorus
Sulfur
Chlorine
Argon
Potassium
Calcium
Scandium
Titanium
Vanadium
Chromium
Manganese
Iron
Cobalt
Nickel
Copper
Zinc
Hydrogen
Helium
Lithium
Beryllium
Boron
Carbon
Nitrogen
Oxygen
Fluorine
Neon
Sodium
Magnesium
Aluminum
Silicon
Phosphorus
Sulfur
Chlorine
Argon
Potassium
Calcium
Scandium
Titanium
Vanadium
Chromium
Manganese
Iron
Cobalt
Nickel
Copper
Zinc
Hydrogen
Helium
Lithium
Beryllium
Boron
Carbon
Nitrogen
Oxygen
Fluorine
Neon
Sodium
Magnesium
Aluminum
Silicon
Phosphorus
Sulfur
Chlorine
Argon
Potassium
Calcium
Scandium
Titanium
Vanadium
Chromium
Manganese
Iron
Cobalt
Nickel
Copper
Zinc
Hydrogen
Helium
Lithium
Beryllium
Boron
Carbon
Nitrogen
Oxygen
Fluorine
Neon
Sodium
Magnesium
Aluminum
Silicon
Phosphorus
Sulfur
Chlorine
Argon
Potassium
Calcium
Scandium
Titanium
Vanadium
Chromium
Manganese
Iron
Cobalt
Nickel
Copper
Zinc
Hydrogen
Helium
Lithium
Beryllium
Boron
Carbon
Nitrogen
Oxygen
Fluorine
Neon
Sodium
Magnesium
Aluminum
Silicon
Phosphorus
Sulfur
Chlorine
Argon
Potassium
Calcium
Scandium
Titanium
Vanadium
Chromium
Manganese
Iron
Cobalt
Nickel
Copper
Zinc