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>