Tag Select

Use the TagSelect component to group a set of Tag Button components and add an optional input limit. As demonstrated in the second example this makes most sense in combination with an Input Block component and a meaningful hint and validation message.

'limit' => false,
 
<x-tagSelect limit="3" limit-label="Themen ausgewählt">
    <x-tagButton id="tag-long-short" value="long-short" label="Long/Short" />
    <x-tagButton id="tag-yield-farming" value="yield-farming" label="Yield-Farming" />
    <x-tagButton id="tag-multi-strategy" value="multi-strategy" label="Multi-Strategy" />
    {{-- ... --}}
</x-tagSelect>

Auswahl: mindestens eins, maximal drei

Wählen sie maximal 3 Themen aus

<x-inputBlock
    id="tags"
    label="Themen (Tags)"
    hint="Auswahl: mindestens eins, maximal drei"
    validation-message="Wählen sie maximal 3 Themen aus"
    data-optional="false"
>
    <x-tagSelect limit="3">
        <x-tagButton id="tag-long-short" value="long-short" label="Long/Short" />
        <x-tagButton id="tag-yield-farming" value="yield-farming" label="Yield-Farming" />
        <x-tagButton id="tag-multi-strategy" value="multi-strategy" label="Multi-Strategy" />
        {{-- ... --}}
    </x-tagSelect>
</x-inputBlock>