Svelte Update Drawers (CRUD) - Flowbite Svelte Blocks

Get started with a collection of drawer components that you can use to update existing data sets from your database inside your dashboard.

Default drawer #

Use this free and responsive example of a drawer component to update an existing data set featuring text input fields, select boxes, and textareas.

  • Svelte
<script lang="ts">
	import { Section } from 'flowbite-svelte-blocks';
	import { Label, Input, Button, Drawer, CloseButton } from 'flowbite-svelte';

	let hidden = true;

	const handleCancel = () => {
		hidden = true;
	};
</script>

<Section sectionClass="h-96">
	<div class="pt-8 text-center">
		<Button onclick={() => (hidden = false)}>Update user</Button>
	</div>
	<Drawer bind:hidden id="sidebar4">
		<div class="flex items-center justify-between">
			<h5 id="drawer-label" class="mb-6 inline-flex items-center text-base font-semibold text-gray-500 uppercase dark:text-gray-400">UPDATE USER</h5>
			<CloseButton onclick={() => (hidden = true)} class="mb-4 dark:text-white" />
		</div>
		<form action="#" class="mb-6">
			<div class="mb-6">
				<Label for="name" class="mb-2 block">Username</Label>
				<Input id="name" name="name" required placeholder="bonnie.green" />
			</div>
			<div class="mb-6">
				<Label for="email" class="mb-2 block">Email</Label>
				<Input id="email" name="email" required placeholder="bonnie.green@company.com" />
			</div>
			<div class="mb-6">
				<Label for="password" class="mb-2 block">Password</Label>
				<Input id="password" name="password" required placeholder="*********" />
			</div>
			<div class="mb-6">
				<Label for="confirm-password" class="mb-2 block">Password</Label>
				<Input id="confirm-password" name="confirm-password" required placeholder="*********" />
			</div>

			<div class="bottom-0 left-0 flex w-full justify-center space-x-4 pb-4 md:absolute md:px-4">
				<Button type="submit" class="w-full">Update user</Button>
				<Button class="w-full" outline color="red" onclick={handleCancel}>
					<svg aria-hidden="true" class="mr-1.5 -ml-1 h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
						><path
							fill-rule="evenodd"
							d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
							clip-rule="evenodd"
						/></svg
					>
					Delete
				</Button>
			</div>
		</form>
	</Drawer>
</Section>