SusSelect

Form select / combobox — closed field identity (open list is optional).

Package

SusKit · Atoms (commercial)

Open in Playground

SusKit · Atoms

Props

Name	Type	Default
Model	Prop<object>	null	v-model
Label	Prop<string>	""	v-model
Placeholder	Prop<string>	""	v-model
ItemTitle	Prop<string>	""	v-model
ItemValue	Prop<string>	""	v-model
Multiple	Prop<bool>	false	v-model
Clearable	Prop<bool>	false	v-model
Searchable	Prop<bool>	false	v-model
AllowCreate	Prop<bool>	false	v-model
CreateText	Prop<string>	"Create \"{0}\""	v-model
SearchText	Prop<string>	""	v-model
NoDataText	Prop<string>	"Nothing found"	v-model
Disabled	Prop<bool>	false	v-model
Readonly	Prop<bool>	false	v-model
Loading	Prop<bool>	false	v-model
Mandatory	Prop<bool>	false	v-model
IsOpen	Prop<bool>	false	v-model
Variant	Prop<string>	"outlined"	v-model
Color	Prop<string>	"primary"	v-model
Density	Prop<string>	"default"	v-model
Counter	Prop<bool>	false	v-model
Error	Prop<string>	""	v-model
Hint	Prop<string>	""	v-model
PersistentHint	Prop<bool>	false	v-model
HideDetails	Prop<string>	"auto"	v-model

Slots

Name
prepend
selection
append
item
noData

Events

Name	Field	Payload
Search	OnSearch	string
Create	OnCreate	string
Change	OnChange	object
Open	OnOpen	—
Close	OnClose	—

Style hooks

USS class contract — override appearance without touching C#. States toggle via these classes:

• sus-select
• sus-select__arrow
• sus-select__chips
• sus-select__clear
• sus-select__clear--visible
• sus-select__control
• sus-select__counter
• sus-select__details
• sus-select__details--hidden
• sus-select__error
• sus-select__field
• sus-select__field-content
• sus-select__hint
• sus-select__item
• sus-select__item--create
• sus-select__item--highlighted
• sus-select__item--select-all
• sus-select__item--selected
• sus-select__item-check
• sus-select__item-text
• sus-select__label
• sus-select__label--floating
• sus-select__loader
• sus-select__loader--active
• sus-select__messages
• sus-select__placeholder
• sus-select__search--hidden
• sus-select__value
• sus-select__value-row
• sus-select--danger
• sus-select--density-comfortable
• sus-select--density-compact
• sus-select--dirty
• sus-select--disabled
• sus-select--error
• sus-select--filled
• sus-select--focused
• sus-select--has-label
• sus-select--has-value
• sus-select--hide-details
• sus-select--info
• sus-select--loading
• sus-select--multiple
• sus-select--open
• sus-select--outlined
• sus-select--plain
• sus-select--primary
• sus-select--readonly
• sus-select--secondary
• sus-select--solo
• sus-select--solo-filled
• sus-select--solo-inverted
• sus-select--success
• sus-select--underlined
• sus-select--warning
• sus-slot
• unity-label
• unity-text-element

Usage

<template>
  <sus:SusSelect Label="Faction"
                 Placeholder="Pick one"
                 :Items="Factions.Value"
                 :Model="Faction.Value"
                 Variant="outlined"
                 @change="OnFaction" />
</template>

<script>
public Prop<List<object>> Factions = new(new List<object>
{
    "Empire", "Republic", "Independent",
});
public Prop<object> Faction = new(null);
void OnFaction(object value) { /* … */ }
</script>

var select = new SusSelect();
select.Label.Value = "Country";
select.Placeholder.Value = "Pick one";
select.Items.Value = new List<object> { "US", "UK", "JP" };
select.Model.Value = null;
select.Clearable.Value = true;
select.Searchable.Value = true;
select.OnChange += value => { /* … */ };

Prop	Role
Items	Options (List<object>)
Model	Current selection (single)
SelectedValues	Multi-select selections
ItemTitle / ItemValue	Property names when items are objects
Multiple / Searchable / AllowCreate	Combobox behaviors

Variant

filled · outlined · underlined · plain · solo · solo-inverted · solo-filled