StellarAdmin

Theme

<sa-toggle-group name="results-view" type="ToggleGroupType.Single">
    <sa-toggle-group-item value="list" selected="true" aria-label="List view">
        <sa-icon name="list"/>
    </sa-toggle-group-item>
    <sa-toggle-group-item value="grid" aria-label="Grid view">
        <sa-icon name="layout-grid"/>
    </sa-toggle-group-item>
    <sa-toggle-group-item value="map" aria-label="Map view">
        <sa-icon name="map"/>
    </sa-toggle-group-item>
</sa-toggle-group>

Usage

<sa-toggle-group> groups a set of related toggles. Each option is a <sa-toggle-group-item> with a value.

Use the type attribute to choose how many items can be selected:

ToggleGroupType.Single (the default) renders the items as native radio buttons, so only one can be selected at a time and it binds to a scalar (e.g. a string or enum). Arrow-key navigation between items works out of the box.
ToggleGroupType.Multiple renders the items as native checkboxes, so any number can be selected and they bind to a collection (e.g. a string[]).

Either way the values post back with no JavaScript required.

<sa-toggle-group name="results-view" type="ToggleGroupType.Single">
    <sa-toggle-group-item value="list" aria-label="List view">
        <sa-icon name="list"/>
    </sa-toggle-group-item>
    <sa-toggle-group-item value="grid" aria-label="Grid view">
        <sa-icon name="layout-grid"/>
    </sa-toggle-group-item>
    <sa-toggle-group-item value="map" aria-label="Map view">
        <sa-icon name="map"/>
    </sa-toggle-group-item>
</sa-toggle-group>

Use the variant attribute to control the visual style of the items. It accepts ToggleVariant.Default (the default) and ToggleVariant.Outline. The variant is inherited by every item in the group.

Theme

<sa-toggle-group name="results-view-outline" type="ToggleGroupType.Single" variant="ToggleVariant.Outline">
    <sa-toggle-group-item value="list" selected="true" aria-label="List view">
        <sa-icon name="list"/>
    </sa-toggle-group-item>
    <sa-toggle-group-item value="grid" aria-label="Grid view">
        <sa-icon name="layout-grid"/>
    </sa-toggle-group-item>
    <sa-toggle-group-item value="map" aria-label="Map view">
        <sa-icon name="map"/>
    </sa-toggle-group-item>
</sa-toggle-group>

Multiple

Set type="ToggleGroupType.Multiple" to allow more than one item to be selected at a time.

Theme

<sa-toggle-group name="amenities" type="ToggleGroupType.Multiple" variant="ToggleVariant.Outline">
    <sa-toggle-group-item value="wifi" selected="true" aria-label="Free Wi-Fi">
        <sa-icon name="wifi"/>
    </sa-toggle-group-item>
    <sa-toggle-group-item value="pool" selected="true" aria-label="Pool">
        <sa-icon name="waves"/>
    </sa-toggle-group-item>
    <sa-toggle-group-item value="parking" aria-label="Parking">
        <sa-icon name="square-parking"/>
    </sa-toggle-group-item>
</sa-toggle-group>

Sizes

Use the size attribute to control the size of the items. It accepts ToggleSize.Default (the default), ToggleSize.Small and ToggleSize.Large. The size is inherited by every item in the group.

Theme

<sa-toggle-group name="results-view-sm" type="ToggleGroupType.Single" size="ToggleSize.Small" variant="ToggleVariant.Outline">
    <sa-toggle-group-item value="list" selected="true" aria-label="List view">
        <sa-icon name="list"/>
    </sa-toggle-group-item>
    <sa-toggle-group-item value="grid" aria-label="Grid view">
        <sa-icon name="layout-grid"/>
    </sa-toggle-group-item>
    <sa-toggle-group-item value="map" aria-label="Map view">
        <sa-icon name="map"/>
    </sa-toggle-group-item>
</sa-toggle-group>
<sa-toggle-group name="results-view-lg" type="ToggleGroupType.Single" size="ToggleSize.Large" variant="ToggleVariant.Outline">
    <sa-toggle-group-item value="list" selected="true" aria-label="List view">
        <sa-icon name="list"/>
    </sa-toggle-group-item>
    <sa-toggle-group-item value="grid" aria-label="Grid view">
        <sa-icon name="layout-grid"/>
    </sa-toggle-group-item>
    <sa-toggle-group-item value="map" aria-label="Map view">
        <sa-icon name="map"/>
    </sa-toggle-group-item>
</sa-toggle-group>

Joined

Set spacing="0" to collapse the gap and join the items into a single segmented control, with shared borders and rounding on the outer corners.

Theme

<sa-toggle-group name="cabin-class" type="ToggleGroupType.Single" spacing="0" variant="ToggleVariant.Outline">
    <sa-toggle-group-item value="economy" selected="true">Economy</sa-toggle-group-item>
    <sa-toggle-group-item value="business">Business Class</sa-toggle-group-item>
    <sa-toggle-group-item value="first">First Class</sa-toggle-group-item>
</sa-toggle-group>

Spacing

Use the spacing attribute to control the gap between items. It defaults to 2 and accepts any number, which is multiplied by 0.25rem (so spacing="2" is a 0.5rem gap). Set it to 0 to join the items into a single segmented control (see Joined above).

Theme

<sa-toggle-group name="results-view-spaced" type="ToggleGroupType.Single" spacing="1" variant="ToggleVariant.Outline">
    <sa-toggle-group-item value="list" selected="true" aria-label="List view">
        <sa-icon name="list"/>
    </sa-toggle-group-item>
    <sa-toggle-group-item value="grid" aria-label="Grid view">
        <sa-icon name="layout-grid"/>
    </sa-toggle-group-item>
    <sa-toggle-group-item value="map" aria-label="Map view">
        <sa-icon name="map"/>
    </sa-toggle-group-item>
</sa-toggle-group>

Vertical

Use the orientation attribute to lay the group out vertically. It accepts ToggleGroupOrientation.Horizontal (the default) and ToggleGroupOrientation.Vertical.

Theme

<sa-toggle-group name="trip-type" type="ToggleGroupType.Single"
                  orientation="ToggleGroupOrientation.Vertical" variant="ToggleVariant.Outline">
    <sa-toggle-group-item value="stays" selected="true" aria-label="Stays">
        <sa-icon name="bed"/>
        Stays
    </sa-toggle-group-item>
    <sa-toggle-group-item value="flights" aria-label="Flights">
        <sa-icon name="plane"/>
        Flights
    </sa-toggle-group-item>
    <sa-toggle-group-item value="cars" aria-label="Car hire">
        <sa-icon name="car"/>
        Car hire
    </sa-toggle-group-item>
</sa-toggle-group>

Model binding

Supports ASP.NET Core model binding via asp-for. Bind a single-select group to a scalar property and a multiple-select group to a collection. The items whose value matches the bound value(s) are rendered as selected.

When using model binding, StellarAdmin will automatically wrap the group inside a Field with the correct label and description derived from data attributes. You can opt out of this behavior by setting the render-field attribute to false.

Theme

<sa-toggle-group asp-for="ResultsView" type="ToggleGroupType.Single" spacing="0" variant="ToggleVariant.Outline">
    <sa-toggle-group-item value="list" aria-label="List view">
        <sa-icon name="list"/>
    </sa-toggle-group-item>
    <sa-toggle-group-item value="grid" aria-label="Grid view">
        <sa-icon name="layout-grid"/>
    </sa-toggle-group-item>
    <sa-toggle-group-item value="map" aria-label="Map view">
        <sa-icon name="map"/>
    </sa-toggle-group-item>
</sa-toggle-group>

<sa-toggle-group asp-for="Amenities" type="ToggleGroupType.Multiple" spacing="0" variant="ToggleVariant.Outline">
    <sa-toggle-group-item value="wifi" aria-label="Free Wi-Fi">
        <sa-icon name="wifi"/>
    </sa-toggle-group-item>
    <sa-toggle-group-item value="pool" aria-label="Pool">
        <sa-icon name="waves"/>
    </sa-toggle-group-item>
    <sa-toggle-group-item value="parking" aria-label="Parking">
        <sa-icon name="square-parking"/>
    </sa-toggle-group-item>
</sa-toggle-group>

<sa-toggle-group asp-for="Sort" type="ToggleGroupType.Single" spacing="0" variant="ToggleVariant.Outline">
    <sa-toggle-group-item value="Recommended">
        <sa-icon name="sparkles"/>
        Recommended
    </sa-toggle-group-item>
    <sa-toggle-group-item value="Price">
        <sa-icon name="banknote"/>
        Price
    </sa-toggle-group-item>
    <sa-toggle-group-item value="Rating">
        <sa-icon name="star"/>
        Rating
    </sa-toggle-group-item>
</sa-toggle-group>

<sa-toggle-group asp-for="TripStyles" type="ToggleGroupType.Multiple" spacing="0" variant="ToggleVariant.Outline">
    <sa-toggle-group-item value="Beach">
        <sa-icon name="sailboat"/>
        Beach
    </sa-toggle-group-item>
    <sa-toggle-group-item value="City">
        <sa-icon name="building"/>
        City
    </sa-toggle-group-item>
    <sa-toggle-group-item value="Camping">
        <sa-icon name="tent"/>
        Camping
    </sa-toggle-group-item>
</sa-toggle-group>

Accessibility

<sa-toggle-group> renders a <div role="group"> and each item renders a <label> wrapping a visually hidden native input. A single-selection group uses radio inputs sharing a name, so it is one Tab stop and the arrow keys move the selection. A multiple-selection group uses checkboxes, so each item is a Tab stop and Space toggles it. Attributes you put on an item, including aria-label, are placed on its input.

Give the group a name with aria-label, and give every icon-only item an aria-label.

Part classes

Pass a ToggleGroupClassNames instance from the StellarAdmin.TagHelpers namespace to <sa-toggle-group> using class-names. Each property accepts an optional string of space-separated CSS classes, which are added to the part's existing classes.

Theme

@{
    var partClasses = new ToggleGroupClassNames
    {
        Root = "travel-field",
        Label = "travel-label",
        Description = "travel-help",
        Control = "travel-toggle-group-control",
        Item = "travel-toggle-group-item",
    };
}

<sa-toggle-group name="classes-view" label="Results view" description="Choose how to browse your stays." type="ToggleGroupType.Single" class-names="@partClasses">
    <sa-toggle-group-item value="list" selected="true">List</sa-toggle-group-item>
    <sa-toggle-group-item value="grid">Grid</sa-toggle-group-item>
    <sa-toggle-group-item value="map">Map</sa-toggle-group-item>
</sa-toggle-group>

Property	Target
`Root`	The generated field wrapper, when the input renders an implicit field.
`Label`	The generated field label, when rendered.
`Description`	The generated help text, when rendered.
`Error`	The generated validation message element, when rendered.
`Content`	The generated container around the label and supporting text in a horizontal implicit field.
`Control`	The toggle group container.
`Item`	Every toggle item in the group.

Root, Label, Description, Error, and Content are inherited from FieldClassNames. They only style generated field elements; with render-field="false", apply class directly to any field elements you compose yourself. The control-specific parts still apply. See Field part classes for the shared behavior and a styled example.

Item classes are added alongside any class specified on an individual <sa-toggle-group-item>.

API Reference

`<sa-toggle-group>`

Renders a <div role="group"> element containing the items. When asp-for is set, the group model-binds and is wrapped in an implicit Field.

Prop

Type

`<sa-toggle-group-item>`

Renders a <label> element wrapping a visually hidden native <input type="radio"> or <input type="checkbox">, depending on the group's type.

Prop

Type

Toggle Group

Usage

Examples

Outline

Multiple

Sizes

Joined

Spacing

Vertical

Model binding

Accessibility

Part classes

API Reference

`<sa-toggle-group>`

`<sa-toggle-group-item>`

On this page