You are currently on Anvil1, which is now in maintenance mode. Visit Anvil2 to get the latest version of the design system.
components / Actions and Inputs
Select
Actions and Inputs
Select
Selects allows a user to choose one or many options from an overlay. Selects are typically used in forms for data entry, and as part of a filtering or sorting pattern.
The choices in the Select can be customized to produce many unique stylings. This can be useful when additional information can enhance the functionality of the Select.
content:<Contentt1="First time users"t2="Recently subscribed to system"/>
},
{
key:2,
text:'Low Response',
value:2,
content:<Contentt1="Low response"t2="No response in the last 60 days"/>
},
{
key:3,
text:'Active Engagement',
value:3,
content:<Contentt1="Active engagement"t2="Frequent responders to campaigns"/>
},
]}
trigger={{placeholder:'Technicians'}}
open
closeOnClickOutside={false}
autoFlipVertically={false}
/>
);
}
Secondary Actions
A secondary action can be performed on individual options. Example actions include editing, deleting, or navigating to more information. Secondary actions are only visible on hover.
Displayed when there are no options available, typically discovered when searching a Select.
<AnvilSelect
search
options={[]}
trigger={{placeholder:'Select a Technician'}}
open
closeOnClickOutside={false}
autoFlipVertically={false}
/>
Trigger
Select Addons
Select Addons can be added to help describe the content. They can be used to help with formatting or show contextual indicators of the content we’re asking for.
<Form>
<Form.AnvilSelect
options={[{
text:'100',
value:1,
}]}
label="Addon"
trigger={{
shortLabel:'$',
size:'small'
}}
/>
<Form.AnvilSelect
options={[{
text:'25',
value:1,
}]}
label="Addon on the right"
trigger={{
shortLabel:'%',
shortLabelPosition:'right'
}}
/>
<Form.AnvilSelect
multiple
options={[{
text:'This is a tag',
value:1,
}]}
label="Addon with an Icon"
trigger={{
shortLabel:<Iconname="tag"/>,
size:'large',
}}
/>
</Form>
With Description
<Stateinitial={[{}]}>
{([value, setValue])=>(
<Form.AnvilSelect
value={value}
onChange={()=>setValue()}
options={[]}
label="Technician"
trigger={{placeholder:'Select a Technician',shortLabel:<Iconname="person"/>}}
description="Description goes here..."
/>
)}
</State>
Error State
<Stateinitial={{value:2,text:'Bob Ross'}}>
{([state, setState])=>(
<Form.AnvilSelect
value={state}
onChange={setState}
options={[
{value:1,text:'Jane Doe'},
{value:2,text:'Bob Ross'},
{value:3,text:'Jackie Robinson'},
{value:4,text:'Alexandria Garcia'}
]}
label="Technician"
trigger={{
error:true,
placeholder:'Select a Technician',
shortLabel:<Iconname="person"/>
}}
open
closeOnClickOutside={false}
autoFlipVertically={false}
/>
)}
</State>
<Stateinitial={[]}>
{([value, setValue])=>(
<Form.AnvilSelect
value={value}
onChange={setValue}
options={[]}
label="Technician"
trigger={{error:true,placeholder:'Select a Technician',shortLabel:<Iconname="person"/>}}
error="You must choose a technician."
/>
)}
</State>
Trigger Sizes
The Select's trigger can be configured into three sizes
<Form>
<Form.AnvilSelect
options={[]}
label="Small Select"
trigger={{size:'small'}}
/>
<Form.AnvilSelect
options={[]}
label="Default Select"
trigger={{}}
/>
<Form.AnvilSelect
options={[]}
label="Large Select"
trigger={{size:'large'}}
/>
</Form>
Tags
Tag display on selection
In multiselects, tags are populated in the trigger for each selection. This allows for a quick readout of selections, but this can quickly get out of hand. By default, the Select will display an X Selected when the selections span across more than 1 row, which can be configured for specific needs.
content:(value)=>(value.map((e, i)=> i < value.length -1?`${e.text}, `:`${e.text}`)),
}}
/>
</Form>
)}
</State>
Clearable
<Form>
<Form.AnvilSelect
options={[{
text:'100',
value:1,
}]}
label="Clearable by default"
value={{
text:'100',
value:1,
}}
trigger={{
shortLabel:'$',
size:'small'
}}
/>
<Form.AnvilSelect
options={[{
text:'100',
value:1,
}]}
label="Disable Clearable"
value={{
text:'100',
value:1,
}}
trigger={{
shortLabel:'$',
size:'small',
clearable:false
}}
/>
</Form>
Header
Search
Options within a select can be filtered through a search functionality. Search is useful with 10+ options available. The more options there are, the more desirable search functionality becomes. Search is also useful when the user knows what they are looking for (such as a specific person).
<AnvilSelect
search={{
placeholder:"Search for a Technician"
}}
options={[
{text:'Jane Doe',value:1},
{text:'Bob Ross',value:2},
{text:'Jackie Robinson',value:3},
{text:'Alexandria Garcia',value:4}
]}
trigger={{placeholder:'Select a Technician'}}
open
closeOnClickOutside={false}
autoFlipVertically={false}
/>
Footer
Select All
In multiselects, all options can be selected at once. There is also an option to select all items from within a single group of content.
<AnvilSelect
multiple={{selectAll:true}}
options={[
{text:'Jane Doe',value:1},
{text:'Bob Ross',value:2},
{text:'Jackie Robinson',value:3}
]}
trigger={{placeholder:'Select a Technician'}}
open
closeOnClickOutside={false}
autoFlipVertically={false}
/>
Apply Selections
The Select allows for an option to delay applying selections until an explicit apply action is given by a user. This can be useful when selections update content on a page, where refreshing the page after each selection is unnecessary.
<AnvilSelect
multiple
footer={{
actionName:'Apply',
onActionClick:(()=>alert("Apply button clicked"))
}}
options={[
{text:'Jane Doe',value:1},
{text:'Bob Ross',value:2},
{text:'Jackie Robinson',value:3}
]}
trigger={{placeholder:'Select a Technician'}}
open
closeOnClickOutside={false}
autoFlipVertically={false}
/>
Custom Footer
The Select also can accept a custom footer. This can be useful when you need more control over footer look and behavior.
<AnvilSelect
multiple
footer={
<divstyle={{flexBasis:'100%'}}>
<divstyle={{margin:'-4px -12px'}}>
<Button
full
iconName="search"
fill="subtle"
primary
onClick={()=>{
alert('Browse Technicians Action');
}}
>
Browse Technicians
</Button>
</div>
</div>
}
options={[
{text:'Jane Doe',value:1},
{text:'Bob Ross',value:2},
{text:'Jackie Robinson',value:3}
]}
trigger={{placeholder:'Select a Technician'}}
open
closeOnClickOutside={false}
autoFlipVertically={false}
/>
Body Options
Scrollable
Like the Popover, the Select's body content can be scrolled through. By default, it begins scrolling after it has reached 90% screen height, but can be customized to a specific pixel value.
trigger={{placeholder:'Select a Technician',shortLabel:<Iconname="person"/>}}
open
closeOnClickOutside={false}
scrollHeight={'250px'}
autoFlipVertically={false}
/>
)}
</State>
Popover Sizing
By default, the Select's trigger and its popover are the same width. The popover part of the Select can also be a custom width, which can be useful when there is little real estate for the trigger.
<AnvilSelect
multiple
options={[
{text:'Jane Doe',value:1},
{text:'Bob Ross',value:2},
{text:'Jackie Robinson',value:3},
{text:'Alexandria Garcia',value:4},
{text:'Zack Bower',value:5},
{text:'Erin Smith',value:6},
{text:'Jarrod Saltalamacchia',value:7},
{text:'Natalia McPhearson',value:8}
]}
trigger={{placeholder:'Technicians',rows:0}}
popoverWidth="m"
/>
Drill-in State
A select has a secondary, drilled-in state that can be accessed through a Select. Like the Popover component, this content can be customized into any format.
A Select's tree selection process can be customized to suit different needs. This logic is best shown on the Option List's tree selection logic section. Any option there can be applied inside of a Select.
Use Cases
Sorting Options
The Select does not give an opinion on how choices are sorted. Common types of sorting include alphabetical, time-based, and categorical. Groups can also help in sorting information. The sort type should match up to what a user expects
<Formstyle={{height:'220px'}}>
<Form.Groupwidths="equal">
<Form.AnvilSelect
options={[
{text:'January',value:1},
{text:'February',value:2},
{text:'March',value:3},
{text:'April',value:4}
]}
trigger={{placeholder:'Month'}}
open
closeOnClickOutside={false}
autoFlipVertically={false}
/>
<Form.AnvilSelect
options={[
{text:'less than',value:1},
{text:'greater than',value:2},
{text:'equal to',value:3}
]}
trigger={{placeholder:'is...'}}
open
closeOnClickOutside={false}
autoFlipVertically={false}
/>
<Form.AnvilSelect
options={[
{text:'Small',value:1},
{text:'Medium',value:2},
{text:'Large',value:3},
{text:'Extra Large',value:4}
]}
trigger={{placeholder:'Size',}}
open
closeOnClickOutside={false}
autoFlipVertically={false}
/>
<Form.AnvilSelect
options={[
{text:'Ariel Somebody',value:1},
{text:'Bob Someone',value:2},
{text:'Caroline Someperson',value:3},
{text:'Derrek Something',value:4}
]}
trigger={{placeholder:'Technician',}}
open
closeOnClickOutside={false}
autoFlipVertically={false}
/>
</Form.Group>
</Form>
When to use a Select
There are at least 5 choices.
There is a default, recommended option.
Space is at a premium in the interface.
When search functionality is useful to narrow options.
When not to use a Select
For navigation. Use an action menu for similar behavior to a Select.
For commands or actions. Use an action menu in its place.
Caution in using a Select
It is easy to overuse the Select, as it can be used to hide complexity on the page. Discoverability of choices can be obscured when hidden via a Select.
For less than 5 options, and screen space is not constrained. Checkboxes for multi-select or Radios for single select may be better.
For more than 30 options. Search is highly encouraged for many options. There is not a definitive component for hundreds of choices: a table (data list, Kendo), a Modal, a complex Popover, or a Drawer.
When a user benefits from scanning the options, visible Checkbox or Radios on the page allows for more emphasis.