Ui.Native.AutoComplete

This component uses the browsers native autocomplete capabilities.

Interactive Demo

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

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

The value can be controlled with the value property.

<Ui.Native.AutoComplete value="Item 1"/>
Options

The options can be controlled with the options property.

<Ui.Native.AutoComplete options=["Item 1", "Item 2", "Item 3"]/>
Placeholder

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

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

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

<>
<Ui.Native.AutoComplete
size={Ui.Size.Px(12)}
options=["Item 1"]
value="Item 1"
/>
<Ui.Native.AutoComplete
size={Ui.Size.Px(16)}
options=["Item 1"]
value="Item 1"
/>
<Ui.Native.AutoComplete
size={Ui.Size.Px(20)}
options=["Item 1"]
value="Item 1"
/>
</>
Disabled

The component can be disabled using the disabled property.

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

The component can be marked invalid using the invalid property.

<Ui.Native.AutoComplete 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.