Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://flowbite-react.com/docs/components/forms below:

React Forms - Flowbite

The form elements from Flowbite React can help you to collect input data from your website visitors by using input field elements, checkboxes, radios, file upload elements, and more based on React and Tailwind CSS.

These components can be used to create form submission pages, authentication features for your users and you can use the elements together with other components from Flowbite React such as with modals, cards, and more.

Check out the form elements from Flowbite React on this page and customize the value and options using the React props API and customize the styles using Tailwind CSS.

Make sure that you import the appropiate components from the flowbite-react library:

import {
  Button,
  Checkbox,
  FileInput,
  Label,
  Radio,
  RangeSlider,
  Select,
  Textarea,
  TextInput,
  ToggleSwitch,
} from "flowbite-react";

Use this example of a form component with <TextInput>, <Checkbox>, <Label> and <Button> elements to create a basic user authentication form and access the value of the component by accessing the value attribute.

Use the sizing prop on the <TextInput> form component from React to set the size of the input fields. You can choose from the sm, md, and lg size options.

Disable the input fields by passing the disabled and readOnly props to the <TextInput> React component.

Pass the shadow prop to the form components from React to automatically add a shadow style.

Show a helper and descriptive text next to the input field to improve UI/UX when submitting forms.

Use this example to show an icon inside the input component by passing the icon prop.

Show the icon on the right side of the input element by passing the rightIcon property.

Show an icon both on the left and right side of the component by passing both the icon and rightIcon props to the input field component from React.

Use this example to show an input element with an alternatively style for showing icons.

Show form validation for success and error messages by using the color prop on the input field element and label components.

Your name

Alright! Username available!

Your name

Oops! Username already taken!

Update the color of the form elements by passing the color props to the input field components from React.

Use this example to show a textarea component in React and receive longer text from your users.

This component can be used to allow users to select from multiple options based on the <Select> component.

Use this example to show a list of options to your users that they can choose from by using the <Checkbox> component.

I want to get promotional offers

I am 18 years or older

For orders shipped from Flowbite from € 25 in books or € 29 on other categories

Eligible for international shipping (disabled)

Ask your users to choose only one value from multiple options based on the <Radio> component from React.

United States

Germany

Spain

United Kingdom

China (disabled)

Use the <FileInput> component to allow users to upload files from their browser.

A profile picture is useful to confirm your are logged into your account

Use the <ToggleSwitch> component to ask users to enable or disable an option such as newsletter settings.

The <RangeSlider> component can be used to allow users to select a number based on a minimum and maximum value.

To learn more about how to customize the appearance of components, please see the Theme docs.

{
  "base": "block w-full cursor-pointer rounded-lg border file:-ms-4 file:me-4 file:cursor-pointer file:border-none file:bg-gray-800 file:py-2.5 file:pe-4 file:ps-8 file:text-sm file:font-medium file:leading-[inherit] file:text-white hover:file:bg-gray-700 focus:outline-none focus:ring-1 dark:file:bg-gray-600 dark:hover:file:bg-gray-500",
  "sizes": {
    "sm": "text-xs",
    "md": "text-sm",
    "lg": "text-lg"
  },
  "colors": {
    "gray": "border-gray-300 bg-gray-50 text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500",
    "info": "border-cyan-500 bg-cyan-50 text-cyan-900 placeholder-cyan-700 focus:border-cyan-500 focus:ring-cyan-500 dark:border-cyan-400 dark:bg-cyan-100 dark:focus:border-cyan-500 dark:focus:ring-cyan-500",
    "failure": "border-red-500 bg-red-50 text-red-900 placeholder-red-700 focus:border-red-500 focus:ring-red-500 dark:border-red-400 dark:bg-red-100 dark:focus:border-red-500 dark:focus:ring-red-500",
    "warning": "border-yellow-500 bg-yellow-50 text-yellow-900 placeholder-yellow-700 focus:border-yellow-500 focus:ring-yellow-500 dark:border-yellow-400 dark:bg-yellow-100 dark:focus:border-yellow-500 dark:focus:ring-yellow-500",
    "success": "border-green-500 bg-green-50 text-green-900 placeholder-green-700 focus:border-green-500 focus:ring-green-500 dark:border-green-400 dark:bg-green-100 dark:focus:border-green-500 dark:focus:ring-green-500"
  }
}

{
  "root": {
    "base": "text-sm font-medium",
    "disabled": "opacity-50",
    "colors": {
      "default": "text-gray-900 dark:text-white",
      "info": "text-cyan-500 dark:text-cyan-600",
      "failure": "text-red-700 dark:text-red-500",
      "warning": "text-yellow-500 dark:text-yellow-600",
      "success": "text-green-700 dark:text-green-500"
    }
  }
}

{
  "base": "h-4 w-4 appearance-none rounded-full border border-gray-300 bg-gray-100 bg-[length:1em_1em] bg-center bg-no-repeat checked:border-transparent checked:bg-current checked:bg-dot-icon focus:outline-none focus:ring-2 focus:ring-offset-2 dark:border-gray-600 dark:bg-gray-700 dark:checked:border-transparent dark:checked:bg-current",
  "color": {
    "default": "text-primary-600 focus:ring-primary-600 dark:ring-offset-gray-800 dark:focus:ring-primary-600",
    "dark": "text-gray-800 focus:ring-gray-800 dark:ring-offset-gray-800 dark:focus:ring-gray-800",
    "failure": "text-red-900 focus:ring-red-900 dark:ring-offset-red-900 dark:focus:ring-red-900",
    "gray": "text-gray-900 focus:ring-gray-900 dark:ring-offset-gray-900 dark:focus:ring-gray-900",
    "info": "text-cyan-800 focus:ring-cyan-800 dark:ring-offset-gray-800 dark:focus:ring-cyan-800",
    "light": "text-gray-900 focus:ring-gray-900 dark:ring-offset-gray-900 dark:focus:ring-gray-900",
    "purple": "text-purple-600 focus:ring-purple-600 dark:ring-offset-purple-600 dark:focus:ring-purple-600",
    "success": "text-green-800 focus:ring-green-800 dark:ring-offset-green-800 dark:focus:ring-green-800",
    "warning": "text-yellow-400 focus:ring-yellow-400 dark:ring-offset-yellow-400 dark:focus:ring-yellow-400",
    "blue": "text-blue-700 focus:ring-blue-600 dark:ring-offset-blue-700 dark:focus:ring-blue-700",
    "cyan": "text-cyan-600 focus:ring-cyan-600 dark:ring-offset-cyan-600 dark:focus:ring-cyan-600",
    "green": "text-green-600 focus:ring-green-600 dark:ring-offset-green-600 dark:focus:ring-green-600",
    "indigo": "text-indigo-700 focus:ring-indigo-700 dark:ring-offset-indigo-700 dark:focus:ring-indigo-700",
    "lime": "text-lime-700 focus:ring-lime-700 dark:ring-offset-lime-700 dark:focus:ring-lime-700",
    "pink": "text-pink-600 focus:ring-pink-600 dark:ring-offset-pink-600 dark:focus:ring-pink-600",
    "red": "text-red-600 focus:ring-red-600 dark:ring-offset-red-600 dark:focus:ring-red-600",
    "teal": "text-teal-600 focus:ring-teal-600 dark:ring-offset-teal-600 dark:focus:ring-teal-600",
    "yellow": "text-yellow-400 focus:ring-yellow-400 dark:ring-offset-yellow-400 dark:focus:ring-yellow-400"
  }
}

{
  "root": {
    "base": "flex"
  },
  "field": {
    "base": "relative w-full",
    "input": {
      "base": "w-full cursor-pointer appearance-none rounded-lg bg-gray-200 dark:bg-gray-700",
      "sizes": {
        "sm": "h-1",
        "md": "h-2",
        "lg": "h-3"
      }
    }
  }
}

{
  "base": "flex",
  "addon": "inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-200 px-3 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-600 dark:text-gray-400",
  "field": {
    "base": "relative w-full",
    "icon": {
      "base": "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3",
      "svg": "h-5 w-5 text-gray-500 dark:text-gray-400"
    },
    "rightIcon": {
      "base": "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3",
      "svg": "h-5 w-5 text-gray-500 dark:text-gray-400"
    },
    "input": {
      "base": "block w-full border focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
      "sizes": {
        "sm": "p-2 sm:text-xs",
        "md": "p-2.5 text-sm",
        "lg": "p-4 sm:text-base"
      },
      "colors": {
        "gray": "border-gray-300 bg-gray-50 text-gray-900 placeholder-gray-500 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500",
        "info": "border-cyan-500 bg-cyan-50 text-cyan-900 placeholder-cyan-700 focus:border-cyan-500 focus:ring-cyan-500 dark:border-cyan-400 dark:bg-cyan-100 dark:focus:border-cyan-500 dark:focus:ring-cyan-500",
        "failure": "border-red-500 bg-red-50 text-red-900 placeholder-red-700 focus:border-red-500 focus:ring-red-500 dark:border-red-400 dark:bg-red-100 dark:focus:border-red-500 dark:focus:ring-red-500",
        "warning": "border-yellow-500 bg-yellow-50 text-yellow-900 placeholder-yellow-700 focus:border-yellow-500 focus:ring-yellow-500 dark:border-yellow-400 dark:bg-yellow-100 dark:focus:border-yellow-500 dark:focus:ring-yellow-500",
        "success": "border-green-500 bg-green-50 text-green-900 placeholder-green-700 focus:border-green-500 focus:ring-green-500 dark:border-green-400 dark:bg-green-100 dark:focus:border-green-500 dark:focus:ring-green-500"
      },
      "withRightIcon": {
        "on": "pr-10",
        "off": ""
      },
      "withIcon": {
        "on": "pl-10",
        "off": ""
      },
      "withAddon": {
        "on": "rounded-r-lg",
        "off": "rounded-lg"
      },
      "withShadow": {
        "on": "shadow-sm dark:shadow-sm-light",
        "off": ""
      }
    }
  }
}

{
  "base": "block w-full rounded-lg border p-2.5 text-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
  "colors": {
    "gray": "border-gray-300 bg-gray-50 text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500",
    "info": "border-cyan-500 bg-cyan-50 text-cyan-900 placeholder-cyan-700 focus:border-cyan-500 focus:ring-cyan-500 dark:border-cyan-400 dark:bg-cyan-100 dark:focus:border-cyan-500 dark:focus:ring-cyan-500",
    "failure": "border-red-500 bg-red-50 text-red-900 placeholder-red-700 focus:border-red-500 focus:ring-red-500 dark:border-red-400 dark:bg-red-100 dark:focus:border-red-500 dark:focus:ring-red-500",
    "warning": "border-yellow-500 bg-yellow-50 text-yellow-900 placeholder-yellow-700 focus:border-yellow-500 focus:ring-yellow-500 dark:border-yellow-400 dark:bg-yellow-100 dark:focus:border-yellow-500 dark:focus:ring-yellow-500",
    "success": "border-green-500 bg-green-50 text-green-900 placeholder-green-700 focus:border-green-500 focus:ring-green-500 dark:border-green-400 dark:bg-green-100 dark:focus:border-green-500 dark:focus:ring-green-500"
  },
  "withShadow": {
    "on": "shadow-sm dark:shadow-sm-light",
    "off": ""
  }
}

{
  "root": {
    "base": "group flex rounded-lg focus:outline-none",
    "active": {
      "on": "cursor-pointer",
      "off": "cursor-not-allowed opacity-50"
    },
    "label": "ms-3 mt-0.5 text-start text-sm font-medium text-gray-900 dark:text-gray-300",
    "input": "sr-only"
  },
  "toggle": {
    "base": "relative rounded-full after:absolute after:rounded-full after:border after:bg-white after:transition-all group-focus:ring-4",
    "checked": {
      "on": "after:translate-x-full after:border-transparent rtl:after:-translate-x-full",
      "off": "bg-gray-200 after:border-gray-300 dark:bg-gray-700",
      "color": {
        "default": "bg-primary-700 group-focus:ring-primary-300 dark:group-focus:ring-primary-800",
        "blue": "bg-blue-700 group-focus:ring-blue-300 dark:group-focus:ring-blue-800",
        "dark": "bg-gray-700 group-focus:ring-gray-300 dark:group-focus:ring-gray-800",
        "failure": "bg-red-700 group-focus:ring-red-300 dark:group-focus:ring-red-800",
        "gray": "bg-gray-500 group-focus:ring-gray-300 dark:group-focus:ring-gray-800",
        "green": "bg-green-600 group-focus:ring-green-300 dark:group-focus:ring-green-800",
        "light": "bg-gray-300 group-focus:ring-gray-300 dark:group-focus:ring-gray-800",
        "red": "bg-red-700 group-focus:ring-red-300 dark:group-focus:ring-red-800",
        "purple": "bg-purple-700 group-focus:ring-purple-300 dark:group-focus:ring-purple-800",
        "success": "bg-green-500 group-focus:ring-green-300 dark:group-focus:ring-green-800",
        "yellow": "bg-yellow-400 group-focus:ring-yellow-300 dark:group-focus:ring-yellow-800",
        "warning": "bg-yellow-600 group-focus:ring-yellow-300 dark:group-focus:ring-yellow-800",
        "cyan": "bg-cyan-500 group-focus:ring-cyan-300 dark:group-focus:ring-cyan-800",
        "lime": "bg-lime-400 group-focus:ring-lime-300 dark:group-focus:ring-lime-800",
        "indigo": "bg-indigo-400 group-focus:ring-indigo-300 dark:group-focus:ring-indigo-800",
        "teal": "bg-teal-400 group-focus:ring-teal-300 dark:group-focus:ring-teal-800",
        "info": "bg-cyan-600 group-focus:ring-cyan-300 dark:group-focus:ring-cyan-800",
        "pink": "bg-pink-600 group-focus:ring-pink-300 dark:group-focus:ring-pink-800"
      }
    },
    "sizes": {
      "sm": "h-5 w-9 min-w-9 after:left-0.5 after:top-0.5 after:h-4 after:w-4 rtl:after:right-0.5",
      "md": "h-6 w-11 min-w-11 after:left-0.5 after:top-0.5 after:h-5 after:w-5 rtl:after:right-0.5",
      "lg": "h-7 w-[52px] min-w-[52px] after:left-0.5 after:top-0.5 after:h-6 after:w-6 rtl:after:right-0.5"
    }
  }
}

{
  "base": "h-4 w-4 appearance-none rounded border border-gray-300 bg-gray-100 bg-[length:0.55em_0.55em] bg-center bg-no-repeat checked:border-transparent checked:bg-current checked:bg-check-icon focus:outline-none focus:ring-2 focus:ring-offset-2 dark:border-gray-600 dark:bg-gray-700 dark:checked:border-transparent dark:checked:bg-current",
  "color": {
    "default": "text-primary-600 focus:ring-primary-600 dark:ring-offset-gray-800 dark:focus:ring-primary-600",
    "dark": "text-gray-800 focus:ring-gray-800 dark:ring-offset-gray-800 dark:focus:ring-gray-800",
    "failure": "text-red-900 focus:ring-red-900 dark:ring-offset-red-900 dark:focus:ring-red-900",
    "gray": "text-gray-900 focus:ring-gray-900 dark:ring-offset-gray-900 dark:focus:ring-gray-900",
    "info": "text-cyan-800 focus:ring-cyan-800 dark:ring-offset-gray-800 dark:focus:ring-cyan-800",
    "light": "text-gray-900 focus:ring-gray-900 dark:ring-offset-gray-900 dark:focus:ring-gray-900",
    "purple": "text-purple-600 focus:ring-purple-600 dark:ring-offset-purple-600 dark:focus:ring-purple-600",
    "success": "text-green-800 focus:ring-green-800 dark:ring-offset-green-800 dark:focus:ring-green-800",
    "warning": "text-yellow-400 focus:ring-yellow-400 dark:ring-offset-yellow-400 dark:focus:ring-yellow-400",
    "blue": "text-blue-700 focus:ring-blue-600 dark:ring-offset-blue-700 dark:focus:ring-blue-700",
    "cyan": "text-cyan-600 focus:ring-cyan-600 dark:ring-offset-cyan-600 dark:focus:ring-cyan-600",
    "green": "text-green-600 focus:ring-green-600 dark:ring-offset-green-600 dark:focus:ring-green-600",
    "indigo": "text-indigo-700 focus:ring-indigo-700 dark:ring-offset-indigo-700 dark:focus:ring-indigo-700",
    "lime": "text-lime-700 focus:ring-lime-700 dark:ring-offset-lime-700 dark:focus:ring-lime-700",
    "pink": "text-pink-600 focus:ring-pink-600 dark:ring-offset-pink-600 dark:focus:ring-pink-600",
    "red": "text-red-600 focus:ring-red-600 dark:ring-offset-red-600 dark:focus:ring-red-600",
    "teal": "text-teal-600 focus:ring-teal-600 dark:ring-offset-teal-600 dark:focus:ring-teal-600",
    "yellow": "text-yellow-400 focus:ring-yellow-400 dark:ring-offset-yellow-400 dark:focus:ring-yellow-400"
  },
  "indeterminate": "border-transparent bg-current bg-dash-icon dark:border-transparent dark:bg-current"
}

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4