Skip to content
daisyBlazor

ToggleGroup

A segmented control: a join of ToggleItem buttons where one value is selected at a time. Generic over T and bound with @bind-Value.
Actions.join
Cover · <ToggleGroup>

Examples

Basic

Each ToggleItem carries a Value; the group's Value is the selected one.

Showing: month
website/Examples/Actions/ToggleGroupBasicExample.razor Source

Icons

Icon alone makes a compact icon toggle; Icon plus Text puts both side by side.

website/Examples/Actions/ToggleGroupIconsExample.razor Source

Sizes and colours

Size and Color are set once on the group; Color paints the selected item.

website/Examples/Actions/ToggleGroupSizesExample.razor Source

Disabled

Disable a single ToggleItem or the whole group.

website/Examples/Actions/ToggleGroupDisabledExample.razor Source

API

<ToggleGroup<T>>

DaisyBlazor

Parameters

  • CheckMark bool
    = false

    Shows a check icon before the content of the selected item(s).

  • Color Color
    = Color.Primary

    Color of the selected item button (e.g. btn-primary); defaults to Primary.

  • Disabled bool
    = false

    Disables every item in the group and ignores selection.

  • SelectionMode SelectionMode
    = SelectionMode.SingleSelection

    SingleSelection (default) selects one item; ToggleSelection also lets a click on the selected item clear it; MultiSelection toggles items in Values.

  • Size Size
    = Size.Medium

    Button size of the items: Small maps to btn-sm, Large to btn-lg.

  • Value T
    = null

    The currently selected item value; supports two-way binding with @bind-Value.

  • Values IEnumerable<T>
    = null

    The selected values when SelectionMode is MultiSelection; supports @bind-Values.

  • Class string
    = null

    Extra CSS classes added to the join container.

  • Style string
    = null

    Inline styles applied to the join container.

Events

  • ValueChanged EventCallback<T>

    Raised with the new value when the user selects an item.

  • ValuesChanged EventCallback<IEnumerable<T>>

    Raised with the new set of values when an item is toggled in MultiSelection mode.

Content

  • ChildContent RenderFragment

    The ToggleItem<T> buttons rendered inside the join group.

<ToggleItem<T>>

DaisyBlazor

Parameters

  • Disabled bool
    = false

    Disables this button; it is also disabled when the parent group is disabled.

  • Icon string
    = null

    Material Symbols ligature rendered small before the label.

  • Text string
    = null

    Button label shown when ChildContent is not set.

  • Value T
    = null

    Value selected in the parent ToggleGroup when this button is clicked.

  • Class string
    = null

    Additional CSS classes merged onto the join-item btn button.

  • Style string
    = null

    Inline styles applied to the button.

Content

  • ChildContent RenderFragment

    Button content; takes precedence over Text.

Something went wrong while running the docs. Reload