condition-group · Admiral UI kit

Example

Group 1

Field

Operator

Value

Laravel

<x-admin::condition-group match="all" match-name="g_match" label="Group 1">
    <x-admin::condition-row>
        <x-admin::select name="g_field" label="Field" :options="['country' => 'Country', 'age' => 'Age']" />
        <x-admin::select name="g_op" label="Operator" :options="['is' => 'is', 'not' => 'is not']" />
        <x-admin::input name="g_value" label="Value" value="NZ" />
        <x-slot:actions><x-admin::button shape="square" icon="trash" aria-label="Remove condition" /></x-slot:actions>
    </x-admin::condition-row>
    <x-slot:actions><x-admin::button size="sm" icon="plus">Add condition</x-admin::button><x-admin::button size="sm" variant="ghost" icon="plus">Add group</x-admin::button></x-slot:actions>
</x-admin::condition-group>

Props

Prop	Required	Default	Options
`match`		`"all"`
`match-name`		`null`
`label`		`null`

Slots: actions

Other attributes, such as wire:model or data-*, pass through to the element.

Other stacks

React and Vue: import { ConditionGroup } from "@admiral/ui-kit/react" (or /vue). See the React and Vue guide.

HTML, for any stack

<div class="adm-condition-group" role="group"  aria-label="Group 1" >
    <div class="adm-condition-group__head">
        <span class="adm-condition-group__label">Group 1</span>                    <select
         name="g_match"          id="g_match"                                 class="adm-select" style="width:auto;" aria-label="Match"
    >
                                        <option value="all" selected>All of these</option>
                                <option value="any" >Any of these</option>
                
    </select>
            </div>
    <div class="adm-condition-group__rows"><div class="adm-condition-row">
    <div class="adm-condition-row__fields"><div class="adm-field">
            <label class="adm-label" for="g_field">Field</label>
        <select
         name="g_field"          id="g_field"                                 class="adm-select"
    >
                                        <option value="country" >Country</option>
                                <option value="age" >Age</option>
                
    </select>
        </div>
        <div class="adm-field">
            <label class="adm-label" for="g_op">Operator</label>
        <select
         name="g_op"          id="g_op"                                 class="adm-select"
    >
                                        <option value="is" >is</option>
                                <option value="not" >is not</option>
                
    </select>
        </div>
        <div class="adm-field">
            <label class="adm-label" for="g_value">Value</label>
        <input
        type="text"
         name="g_value"          id="g_value"          value="NZ"                                 class="adm-input"
    >
        </div></div>
    <div class="adm-row"><button type="button" class="adm-btn adm-btn--secondary adm-btn--square" aria-label="Remove condition" ><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 6h18M8 6V4h8v2M6 6l1 15h10l1-15"/></svg></button></div></div></div>
    <div class="adm-row"><button type="button" class="adm-btn adm-btn--secondary adm-btn--sm" ><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>Add condition</button>
<button type="button" class="adm-btn adm-btn--ghost adm-btn--sm" ><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>Add group</button></div></div>