Forms

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

Input

InputExpression

      <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

Enable notifications

Dark mode

      <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

Event Date

ISO Format

      <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>