Forms

Form input elements including text inputs, switches, selects, and date pickers.

Attribute Passthrough

The input, textarea and checkbox components forward any extra attribute you write on the tag straight to the element they render, even when the component type declares no property for it. Standard HTML attributes like placeholder or rows work out of the box, and so do arbitrary data-*, aria-* and AlpineJS attributes.

A passed through attribute overwrites the component's own value, except for class and style, which are merged so you add to the component's styling instead of losing it. Use class-replace when you do want to drop the component's classes entirely. The one exception is type, which is never passed through so the rendered input always matches the bound model property. 

      <pines-input asp-for="YourModel.Email" autocomplete="email" placeholder="you@example.com" />

  <pines-textarea asp-for="YourModel.Message" rows="6" maxlength="500" placeholder="Type your message here." />

  <pines-checkbox asp-for="YourModel.Subscribed" data-analytics-id="newsletter-opt-in" />

  @* class is merged with the component's own classes, class-replace swaps them out *@
  <pines-input asp-for="YourModel.Name" class="max-w-xs" x-on:input="$dispatch('name-changed')" />

Input

      <pines-input show-label="true" asp-for="YourModel.Name"></pines-input>

  <pines-input show-label="true" disabled="true" asp-for="YourModel.Email"></pines-input>

Switch

      <pines-switch label="Enable notifications"></pines-switch>

  <pines-switch label="Dark mode" switch-on="true"></pines-switch>

Select

      @{
      var selectItems = new List<PinesSelectItem>()
      {
          new PinesSelectItem { Title = "Apple", Value = "apple" },
          new PinesSelectItem { Title = "Banana", Value = "banana" },
          new PinesSelectItem { Title = "Cherry", Value = "cherry" },
          new PinesSelectItem { Title = "Grape", Value = "grape", Disabled = true },
      };
  }

  <pines-select items="selectItems" placeholder="Choose a fruit"></pines-select>

Date Picker

      <pines-date-picker label="Event Date" placeholder="Pick a date"></pines-date-picker>

  <pines-date-picker label="ISO Format" date-format="YYYY-MM-DD"></pines-date-picker>

Textarea

      <pines-textarea placeholder="Type your message here." asp-for="YourModel.Message"></pines-textarea>

  <pines-textarea show-label="true" placeholder="Description" asp-for="YourModel.Description"></pines-textarea>

Checkbox

      <pines-checkbox label="Accept terms and conditions"></pines-checkbox>

  <pines-checkbox label="Subscribe to newsletter" checked="true" asp-for="YourModel.Subscribed"></pines-checkbox>

Multi Select

Choose multiple fruits
  • No results found
      <pines-date-picker label="Event Date" placeholder="Pick a date"></pines-date-picker>

  <pines-date-picker label="ISO Format" date-format="YYYY-MM-DD"></pines-date-picker>