Input

Input is a styled HTML Input. There are no behavior changes applied to the native HTML tag other than light styling done via CSS in order to keep inputs accessible.

Usage

Styles or abstracts HTML input elements.

<input
  placeholder="Input"
  class="drac-input drac-input-white drac-text-white"
/>
<Input placeholder="Input" color="white" />;

Colors

Inputs can be customized to use any of the Dracula UI theme colors.

<div class="drac-box">
  <input
    placeholder="purple"
    class="drac-input drac-input-purple drac-text-purple drac-m-xs"
  /><input
    placeholder="green"
    class="drac-input drac-input-green drac-text-green drac-m-xs"
  />
</div>
<Box>
  <Input color="purple" placeholder="purple" m="xs" />
  <Input color="green" placeholder="green" m="xs" />
</Box>;

Sizes

Inputs can be customize to use several different sizes.

<div class="drac-box">
  <input
    placeholder="small"
    class="drac-input drac-input-sm drac-input-white drac-text-white drac-m-xs"
  /><input
    placeholder="medium"
    class="drac-input drac-input-white drac-text-white drac-m-xs"
  /><input
    placeholder="large"
    class="drac-input drac-input-lg drac-input-white drac-text-white drac-m-xs"
  />
</div>
<Box>
  <Input color="white" size="sm" placeholder="small" m="xs" />
  <Input color="white" size="md" placeholder="medium" m="xs" />
  <Input color="white" size="lg" placeholder="large" m="xs" />
</Box>;

Variants

Use the `outline` variant to represent subtler text Inputs

<div class="drac-box">
  <input
    placeholder="normal"
    class="drac-input drac-input-white drac-text-white drac-m-xs"
  /><input
    placeholder="outline"
    class="drac-input drac-input-outline drac-input-white drac-text-white drac-m-xs"
  />
</div>
<Box>
  <Input color="white" variant="normal" placeholder="normal" m="xs" />
  <Input color="white" variant="outline" placeholder="outline" m="xs" />
</Box>;

Border Sizes

Border size can be customize to use several different sizes.

sm

md

lg

<div class="drac-box">
  <div class="drac-box drac-mb-sm">
    <h2 class="drac-heading drac-heading-sm drac-text-white">sm</h2>
    <input
      placeholder="small border outline"
      class="drac-input drac-input-border-sm drac-input-green drac-text-green drac-m-xs"
    /><input
      placeholder="small border outline"
      class="drac-input drac-input-outline drac-input-border-sm drac-input-green drac-text-green drac-m-xs"
    />
  </div>
  <div class="drac-box drac-mb-sm">
    <h2 class="drac-heading drac-heading-sm drac-text-white">md</h2>
    <input
      placeholder="medium border outline"
      class="drac-input drac-input-border-md drac-input-purple drac-text-purple drac-m-xs"
    /><input
      placeholder="medium border outline"
      class="drac-input drac-input-outline drac-input-border-md drac-input-purple drac-text-purple drac-m-xs"
    />
  </div>
  <div class="drac-box drac-mb-sm">
    <h2 class="drac-heading drac-heading-sm drac-text-white">lg</h2>
    <input
      placeholder="large border outline"
      class="drac-input drac-input-border-lg drac-input-yellow drac-text-yellow drac-m-xs"
    /><input
      placeholder="large border outline"
      class="drac-input drac-input-outline drac-input-border-lg drac-input-yellow drac-text-yellow drac-m-xs"
    />
  </div>
</div>
<Box>
  <Box mb="sm">
    <Heading size="sm">sm</Heading>
    <Input
      color="green"
      variant="normal"
      borderSize="sm"
      placeholder="small border outline"
      m="xs"
    />
    <Input
      color="green"
      variant="outline"
      borderSize="sm"
      placeholder="small border outline"
      m="xs"
    />
  </Box>
  <Box mb="sm">
    <Heading size="sm">md</Heading>
    <Input
      color="purple"
      variant="normal"
      borderSize="md"
      placeholder="medium border outline"
      m="xs"
    />
    <Input
      color="purple"
      variant="outline"
      borderSize="md"
      placeholder="medium border outline"
      m="xs"
    />
  </Box>
  <Box mb="sm">
    <Heading size="sm">lg</Heading>
    <Input
      color="yellow"
      variant="normal"
      borderSize="lg"
      placeholder="large border outline"
      m="xs"
    />
    <Input
      color="yellow"
      variant="outline"
      borderSize="lg"
      placeholder="large border outline"
      m="xs"
    />
  </Box>
</Box>;

Type

Use the `type` property to define what kind of HTML input you would like to use

<div class="drac-box">
  <input
    placeholder="Password"
    type="password"
    class="drac-input drac-input-white drac-text-white drac-my-sm"
  /><input
    placeholder="Date"
    type="date"
    class="drac-input drac-input-white drac-text-white drac-my-sm"
  /><input
    placeholder="Email"
    type="email"
    class="drac-input drac-input-white drac-text-white drac-my-sm"
  /><input
    placeholder="Number"
    type="number"
    class="drac-input drac-input-white drac-text-white drac-my-sm"
  /><input
    placeholder="Range"
    type="range"
    class="drac-input drac-input-white drac-text-white drac-my-sm"
  /><input
    placeholder="Telephone"
    type="tel"
    class="drac-input drac-input-white drac-text-white drac-my-sm"
  />
</div>
<Box>
  <Input my="sm" color="white" placeholder="Password" type="password" />
  <Input my="sm" color="white" placeholder="Date" type="date" />
  <Input my="sm" color="white" placeholder="Email" type="email" />
  <Input my="sm" color="white" placeholder="Number" type="number" />
  <Input my="sm" color="white" placeholder="Range" type="range" />
  <Input my="sm" color="white" placeholder="Telephone" type="tel" />
</Box>;

Properties

color

The Dracula UI theme color to be used

"cyan" | "green" | "orange" | "pink" | "purple" | "red" | "yellow" | "white"
size

Controls the size of the input based on pre-configured Dracula UI sizes.

number | "lg" | "md" | "sm"
borderSize

Controls the border size of the input based on pre-configured Dracula UI sizes.

"lg" | "md" | "sm"
variant

Controls the variation the input. `normal` -> Regular Input component with a light background color. `outline` -> Keeps the accent color, but removes the background.

"normal" | "outline"
type

Controls the type of the input.

"number" | "hidden" | "color" | "button" | "checkbox" | "date" | "datetime-local" | "email" | "file" | "image" | "month" | "password" | "radio" | "range" | "reset" | "search" | ... 6 more ...