Svelte Create Forms (CRUD) - Flowbite Svelte Blocks

Get started with a collection of forms crafted for the "create" action from the CRUD layouts featuring form elements coded in Tailwind CSS.

Default form #

Use this free example of a form based on the CRUD layouts where you can create a new data entry inside your dashboard.

  • Svelte
<script lang="ts">
  import { Section } from 'flowbite-svelte-blocks';
  import { Label, Input, Button, Select, Textarea } from 'flowbite-svelte';
  const handleSubmit = () => {
    alert('Form submited.');
  let selected;
  let countries = [
    { value: 'tv', name: 'TV/Monitors' },
    { value: 'pc', name: 'PC' },
    { value: 'phone', name: 'Phones' }

<Section name="crudcreateform">
  <h2 class="mb-4 text-xl font-bold text-gray-900 dark:text-white">Add a new product</h2>
  <form on:submit={handleSubmit}>
    <div class="grid gap-4 sm:grid-cols-2 sm:gap-6">
      <div class="sm:col-span-2">
        <Label for="name" class="mb-2">Product Name</Label>
        <Input type="text" id="name" placeholder="Type product name" required />
      <div class="w-full">
        <Label for="brand" class="mb-2">Brand</Label>
        <Input type="text" id="brand" placeholder="Product brand" required />
      <div class="w-full">
        <Label for="price" class="mb-2">Price</Label>
        <Input type="text" id="price" placeholder="$29999" required />
      <div class="w-full">
          <Select class="mt-2" items={countries} bind:value={selected} required />
      <div class="w-full">
        <Label for="weight" class="mb-2">Item Weight (kg)</Label>
        <Input type="text" id="weight" placeholder="12" required />
      <div class="sm:col-span-2">
        <Label for="description" class="mb-2">Description</Label>
        <Textarea id="description" placeholder="Your description here" rows="4" name="description" required />
      <Button type="submit" class="w-32">Add product</Button>

Component data