button group select component

[xmlking]

Feature Request

is it possible quickly implement button-group select components from your button-groups component? like this: https://material.angular.io/components/button-toggle/overview

[shinokada]

I can see a couple of things in this feature.

1. Currently Flowbite doesn't have a Button toggle. Could you suggest to the Flowbite issue?

2. Since ButtonGroup has $$restProps, you can add your props to the component:

Warning: I haven't tested this:

<script>
    import { ButtonGroup, ButtonGroupItem, Button, Input, Label } from '$lib';
    const mySubmit = (e) => {
        const formData = new FormData(e.target);
        const data = {};
        for (let field of formData) {
            const [key, value] = field;
            data[key] = value;
        }
        // console.log(data);
        alert(`Submitted. ${JSON.stringify(data)}`);
        // console.log(e.target.value);
    };
</script>

<form on:submit|preventDefault={mySubmit}>
// not sure how to wrap this part
    <ButtonGroup >
        <ButtonGroupItem value="option-1">Option 1</ButtonGroupItem>
        <ButtonGroupItem value="option-2">Option 2</ButtonGroupItem>
        <ButtonGroupItem value="option-3">Option 3</ButtonGroupItem>
    </ButtonGroup>

    <div class="mb-6">
        <Label for="input" class="block mb-2">Input</Label>
        <Input id="input" name="large" placeholder="Input" />
    </div>
    <Button type="submit" value="Submit">Submit</Button>
</form>

I think it will be a good feature to have in the future version.

[jjagielka]

Please take a look at those:

• https://flowbite-svelte.com/docs/forms/radio#RadioButton
• https://flowbite-svelte.com/docs/forms/checkbox#CheckboxButton

Comments?

[xmlking]

Please take a look at those:

• https://flowbite-svelte.com/docs/forms/radio#RadioButton
• https://flowbite-svelte.com/docs/forms/checkbox#CheckboxButton

Comments? This is a great addition. Thanks
After unselect a button , focus is still on it and only after I click outside , its color is changed to unselected color.

Will it support outline style buttons ?

• testing on iPad

[xmlking]

RadioButton should have Button look and feel as per your docs.

But when disabled field added, it is not disabled like Button

Expected

Actual

What I am trying:

<ButtonGroup>
    {#each items as item}
         {@const id = generateId()}
        <Button outline class="checked-label" {...$$restProps}>
            <input
                type="radio"
                {id}
                name={field}
                bind:group={$value}
                data-invalid={$errors}
                on:blur
                on:change
                on:click
                value={item.value}
                aria-label={item.label}
                class="peer hidden"
                {...$constraints}
                {...$$restProps}
            />
            <label for={id} >{item.label}</label>
    </Button>
    <!-- <RadioButton outline {...$$restProps}
        {id}
        name={field}
        value={item.value}
        bind:group={$value}
        on:blur
        on:change
        on:click
        aria-label={item.label}
        data-invalid={$errors}
        {...$constraints}
        {...$$restProps}
    >
        {item.label}
    </RadioButton> -->
    {/each}
</ButtonGroup>