Input

Displays a form input field. 

<Input
        className="w-72"
        id="email"
        placeholder="Email"
        type="email"
    />

Installation

uvx --from basic-components components add input
pipx run --spec basic-components components add input
pip install basic-components && components add input
  • Copy Input components below to your local environment
  • Place them in the components/ui/input directory in your project
  • Configure your jinja environment for JinjaX
  • Add the cn() helper function to your global jinja environment

Usage

<Input
        className="w-72"
        id="email"
        placeholder="Email"
        type="email"
    />

Attributes

Prop Type Default Description
name String "" The name attribute for the input field.
type String "text" Specifies the type of input (e.g., text, password).
value String "" The initial value of the input.
placeholder String "" Placeholder text shown inside the input.
autocomplete Optional[String] "" Determines if autocomplete is enabled for the input.
required Boolean False Marks the input as required.
className String "" Additional CSS classes for customization.
disabled Boolean False Disables the input if True.
error Boolean False Applies error styling if True.

Code

{#def
    name: str = "",
    type: str = "text",
    defaultValue: str = "",
    placeholder: str = '',
    autocomplete: str = '',
    required: bool = False,
    className: str = "",
    disabled: bool = False,
    error: bool = False,
#}
{% macro error_classes() %}
  {%- if error -%}
    border-red-600 dark:border-red-300 ring-red-600 dark:ring-red-300
  {%- else -%}
    border-zinc-200 dark:border-zinc-800
  {%- endif -%}
{% endmacro %}

<input
    type="{{ type }}"
    name="{{ name }}"
    autocomplete="{{ autocomplete }}"
    placeholder="{{ placeholder }}"
    value="{{ defaultValue }}"
    {% if required %}required{% endif %}
    class="{{ className }} flex h-10 rounded-md border bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-zinc-950 placeholder:text-zinc-500 outline-none focus:outline-none focus:border-zinc-950 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-zinc-950 dark:ring-offset-zinc-950 dark:file:text-zinc-50 dark:placeholder:text-zinc-400 dark:focus-visible:ring-zinc-300 dark:focus:border-zinc-300 {{ error_classes() }}"
    {% if disabled %}disabled{% endif %}
    {{ attrs.render() }}
/>

Examples

Button

<div class="flex w-full max-w-sm items-center space-x-2">
  <Input type="email" placeholder="Email"/>
  <Button type="submit">Subscribe</Button>
</div>

Disabled

{% set disabled=True %}

<Input
        id="email"
        placeholder="Email"
        type="email"
        :disabled="{{ disabled }}"
    />

Error

{% set error=True %}

<Input
        id="email"
        placeholder="Email"
        type="email"
        :error="{{ error }}"
    />

File

<div class="w-full space-y-2">
  <Label htmlFor="picture">Picture</Label>
  <Input id="picture" type="file"/>
</div>

Label

{% set disabled = True %}
<div class="w-full space-y-2">
  <Label for_id="email">Email Address</Label>
  <Input
      id="email"
      placeholder="Email"
      type="email"
      :disabled="{{ disabled }}"
  />
</div>

Peer Disabled

<div class="w-full space-y-2">
  <Label for="email" disabled="true">Email Address</Label>
  <Input id="email" type="text" class="peer" disabled/>
</div>