View Source PineUi.TextInput (Pine UI v0.1.2)

Provides text input components for forms and user input.

The TextInput module offers three main variants:

All text input components support labels, hints, error messages, and are fully integrated with Phoenix LiveView.

Examples

<PineUi.text_input
  id="email"
  label="Email Address"
  type="email"
  placeholder="you@example.com"
/>

<PineUi.text_input_with_icon
  id="search"
  icon={~H"<svg>...</svg>"}
  placeholder="Search..."
/>

<PineUi.textarea
  id="description"
  label="Description"
  rows={6}
/>

Accessibility

All text input components include proper labeling, focus styles, and ARIA attributes for accessibility.

Summary

Functions

Renders a basic text input component.

Renders a textarea component for multiline text input.

Renders a text input with an icon on the left side.

Functions

Renders a basic text input component.

This component supports various input types and can include prefix/suffix text alongside the input.

Examples

<.basic id="username" label="Username" />

<.basic
  id="price"
  label="Price"
  type="number"
  prefix="$"
  hint="Enter amount in dollars"
/>

<.basic
  id="email"
  label="Email"
  type="email"
  error="Please enter a valid email address"
  required={true}
/>

Options

  • :id - The ID for the input element (required)
  • :name - The name attribute (optional, defaults to ID)
  • :label - Label text (optional)
  • :type - Input type (optional, defaults to "text")
  • :value - Current input value (optional)
  • :placeholder - Placeholder text (optional)
  • :prefix - Text to display before the input (optional)
  • :suffix - Text to display after the input (optional)
  • :hint - Help text displayed below the input (optional)
  • :error - Error message displayed below the input (optional)
  • :required - Whether the field is required (optional, defaults to false)
  • :disabled - Whether the field is disabled (optional, defaults to false)
  • :readonly - Whether the field is read only (optional, defaults to false)
  • :autofocus - Whether the field should autofocus (optional, defaults to false)
  • :phx_change - Phoenix change event name (optional)
  • :phx_blur - Phoenix blur event name (optional)
  • :phx_focus - Phoenix focus event name (optional)
  • :phx_debounce - Phoenix debounce setting (optional)
  • :class - Additional CSS classes for the input element (optional)
  • :container_class - CSS classes for the container div (optional)

Renders a textarea component for multiline text input.

Examples

<.textarea
  id="description"
  label="Description"
  rows={4}
/>

<.textarea
  id="feedback"
  label="Your Feedback"
  placeholder="Tell us what you think..."
  hint="Your feedback helps us improve our service"
  rows={8}
/>

Options

  • :id - The ID for the textarea element (required)
  • :name - The name attribute (optional, defaults to ID)
  • :label - Label text (optional)
  • :value - Current textarea value (optional)
  • :placeholder - Placeholder text (optional)
  • :rows - Number of visible rows (optional, defaults to 4)
  • :hint - Help text displayed below the textarea (optional)
  • :error - Error message displayed below the textarea (optional)
  • :required - Whether the field is required (optional, defaults to false)
  • :disabled - Whether the field is disabled (optional, defaults to false)
  • :readonly - Whether the field is read only (optional, defaults to false)
  • :autofocus - Whether the field should autofocus (optional, defaults to false)
  • :phx_change - Phoenix change event name (optional)
  • :phx_blur - Phoenix blur event name (optional)
  • :phx_debounce - Phoenix debounce setting (optional)
  • :class - Additional CSS classes for the textarea element (optional)
  • :container_class - CSS classes for the container div (optional)

Renders a text input with an icon on the left side.

This component is ideal for search inputs or any field that benefits from a visual indicator of its purpose.

Examples

<.with_icon
  id="search"
  icon={~H"<svg class='h-5 w-5 text-gray-400' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'><path fill-rule='evenodd' d='M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z' clip-rule='evenodd'/></svg>"}
  placeholder="Search..."
/>

<.with_icon
  id="email"
  icon={~H"<svg>...</svg>"}
  label="Email"
  error={@form.errors[:email]}
/>

Options

  • :id - The ID for the input element (required)
  • :name - The name attribute (optional, defaults to ID)
  • :label - Label text (optional)
  • :icon - The icon to display (required, as HEEx or HTML string)
  • :type - Input type (optional, defaults to "text")
  • :value - Current input value (optional)
  • :placeholder - Placeholder text (optional)
  • :hint - Help text displayed below the input (optional)
  • :error - Error message displayed below the input (optional)
  • :required - Whether the field is required (optional, defaults to false)
  • :disabled - Whether the field is disabled (optional, defaults to false)
  • :readonly - Whether the field is read only (optional, defaults to false)
  • :autofocus - Whether the field should autofocus (optional, defaults to false)
  • :phx_change - Phoenix change event name (optional)
  • :phx_blur - Phoenix blur event name (optional)
  • :phx_focus - Phoenix focus event name (optional)
  • :phx_debounce - Phoenix debounce setting (optional)
  • :class - Additional CSS classes for the input element (optional)
  • :container_class - CSS classes for the container div (optional)