Forms

PinesUI provides a collection of form input components for building data-entry interfaces. Each component integrates with ASP.NET Core model binding via the asp-for attribute, enabling automatic label generation, validation, and model state binding. Use these components to build consistent, accessible forms with minimal boilerplate.

<pines-input> Properties

Attribute Type Description
asp-for ModelExpression? Model binding expression used to connect the input to a property on the page model. Enables automatic name, id, and value binding, as well as validation message integration.
show-label bool When true, renders a label above the input derived from the asp-for expression's display name. Disable when you are providing your own external label or when the input's context makes a label redundant.
disabled bool When true, renders the input in a read-only, non-interactive state. Use for fields that are contextually locked — such as auto-populated values or fields the current user does not have permission to edit.

<pines-switch> Properties

Attribute Type Description
label string Text label displayed alongside the toggle switch. Use a short, action-oriented phrase that describes what enabling the switch does — for example, "Enable notifications" or "Dark mode".
asp-for ModelExpression? Model binding expression for the boolean toggle value. Connects the switch to a bool property on the page model so its state is submitted and validated with the form.
switch-on bool Sets the initial state of the toggle. Use true to pre-enable the switch for features that should be on by default, or false to require explicit opt-in.

<pines-select> Properties

Attribute Type Default Description
items List<PinesSelectItem> new List<>() The list of options to render in the dropdown. Populate this from your page model, typically from a database query or a static list of valid choices.
placeholder string "Select Item" Text shown as the initially selected, non-value option. Use a short verb phrase like "Select a country" to guide the user toward making a selection.
asp-for ModelExpression? N/A Model binding expression that connects the selected value to a property on the page model. Enables automatic name/id assignment and integrates with model validation.

PinesSelectItem Properties

Property Type Description
Title string The visible label shown in the dropdown list for this option. Use a human-readable string that clearly represents the underlying value to the user.
Value string The underlying value submitted with the form when this option is selected. Typically corresponds to an ID, enum member, or key in your data model.
Disabled bool When true, the option is rendered in a non-selectable state within the dropdown. Use to indicate unavailable or restricted choices without removing them from the list entirely.

<pines-date-picker> Properties

Attribute Type Default Description
date-format string "M d, Y" Format string used to display the selected date. Defaults to "M d, Y" (e.g., Jan 1, 2025). Adjust this to match the date display conventions expected by your users or required by your application.
label string "Select Date" Text label rendered above the date picker field. Use a clear, descriptive label that communicates what date is being collected — for example, "Date of Birth" or "Appointment Date".
placeholder string "Select date" Text shown inside the input before a date is selected. Use a hint such as "Select date" or a format example like "MM/DD/YYYY" to guide the user.
asp-for ModelExpression? N/A Model binding expression connecting the selected date to a property on the page model. Enables automatic name/id assignment and form validation integration.