Form Controls - Noundry UI Showcase

Button

Interactive buttons with variants, sizes, icons, and loading states.

Variants

Sizes

With Icons

States

View Code

<!-- Variants -->
<noundry-button variant="primary">Primary</noundry-button>
<noundry-button variant="secondary">Secondary</noundry-button>
<noundry-button variant="success">Success</noundry-button>
<noundry-button variant="danger">Danger</noundry-button>
<noundry-button variant="outline">Outline</noundry-button>

<!-- Sizes -->
<noundry-button variant="primary" size="sm">Small</noundry-button>
<noundry-button variant="primary" size="lg">Large</noundry-button>

<!-- With Icons -->
<noundry-button variant="primary" icon="check">Save</noundry-button>
<noundry-button variant="outline" icon="search" icon-position="right">Search</noundry-button>

<!-- States -->
<noundry-button variant="primary" disabled="true">Disabled</noundry-button>
<noundry-button variant="primary" loading="true" loading-text="Saving...">Save</noundry-button>

<!-- Form Submit -->
<noundry-button type="submit" variant="primary">Submit</noundry-button>

Button Properties

Property	Type	Default	Description
`variant`	string	"primary"	Style: primary, secondary, success, danger, outline
`size`	string	"md"	Size: sm, md, lg
`type`	string	"button"	HTML type: button, submit, reset
`disabled`	bool	false	Disable button
`loading`	bool	false	Show loading state
`loading-text`	string	null	Text during loading
`icon`	string	null	Icon name
`icon-position`	string	"left"	Icon position: left, right

Text Input

Text input fields with validation, icons, and help text support.

Full Name

Email Address

Password

Phone Number

With Help Text

This is helpful information

With Error

This field is required

Sizes & States

Small Input

Medium Input

Large Input

Disabled Input

Read-Only Input

View Code

<!-- Basic Input -->
<noundry-text-input label="Full Name"
                    placeholder="Enter your name"
                    icon="user" />

<!-- With Model Binding -->
<noundry-text-input asp-for="Email"
                    type="email"
                    label="Email Address"
                    placeholder="user@example.com"
                    icon="email"
                    help-text="We'll never share your email" />

<!-- With Error -->
<noundry-text-input label="Username"
                    placeholder="Enter username"
                    error-message="This field is required" />

<!-- Sizes -->
<noundry-text-input label="Input" size="sm" />
<noundry-text-input label="Input" size="md" />
<noundry-text-input label="Input" size="lg" />

Text Input Properties

Property	Type	Default	Description
`asp-for`	ModelExpression	null	Model binding
`type`	string	"text"	Input type: text, email, password, number, tel, url
`label`	string	null	Field label
`placeholder`	string	null	Placeholder text
`icon`	string	null	Icon name
`help-text`	string	null	Help text below input
`error-message`	string	null	Error message
`size`	string	"md"	Input size: sm, md, lg

Textarea

Multi-line text input with auto-resize and character count support.

Description

With Character Count

0/200

Auto Resize

View Code

<!-- Basic Textarea -->
<noundry-textarea label="Description"
                  placeholder="Enter description..."
                  rows="3" />

<!-- With Model Binding and Character Count -->
<noundry-textarea asp-for="Description"
                  label="Description"
                  placeholder="Enter details..."
                  rows="4"
                  max-length="500"
                  show-character-count="true" />

<!-- Auto Resize -->
<noundry-textarea label="Auto Resize"
                  placeholder="Grows as you type..."
                  auto-resize="true"
                  rows="2" />

Textarea Properties

Property	Type	Default	Description
`asp-for`	ModelExpression	null	Model binding
`label`	string	null	Field label
`rows`	int	3	Initial rows
`max-length`	int	null	Character limit
`show-character-count`	bool	false	Show character counter
`auto-resize`	bool	false	Auto-expand height

Switch & Checkbox

Toggle controls for boolean values. Use switches for on/off settings and checkboxes for multiple selections.

Switch

Enable notifications

Dark mode

Auto-save

Disabled switch

Checkbox

I agree to the terms and conditions

Subscribe to newsletter

Remember me

Disabled checkbox

View Code

<!-- Switch -->
<noundry-switch asp-for="EnableNotifications"
                label="Enable Notifications"
                size="md"
                color="blue" />

<!-- Switch with different colors -->
<noundry-switch label="Dark mode" color="green" checked="true" />

<!-- Checkbox -->
<noundry-checkbox asp-for="AgreeToTerms"
                  label="I agree to the terms and conditions"
                  required="true" />

<!-- Pre-checked Checkbox -->
<noundry-checkbox label="Subscribe to newsletter" checked="true" />

Switch Properties

Property	Type	Default	Description
`asp-for`	ModelExpression	null	Model binding
`label`	string	null	Switch label
`checked`	bool	false	Initial state
`size`	string	"md"	Size: sm, md, lg
`color`	string	"blue"	Color theme

Radio Group

Radio button groups for single selection from multiple options.

Vertical Layout (Default)

Payment Method

Credit Card

PayPal

Bank Transfer

Horizontal Layout

Plan

Free

Pro

Enterprise

View Code

<!-- Vertical Layout -->
<noundry-radio-group asp-for="PaymentMethod" label="Payment Method">
    <noundry-radio value="card" label="Credit Card" />
    <noundry-radio value="paypal" label="PayPal" />
    <noundry-radio value="bank" label="Bank Transfer" />
</noundry-radio-group>

<!-- Horizontal Layout -->
<noundry-radio-group label="Plan" layout="horizontal">
    <noundry-radio value="free" label="Free" />
    <noundry-radio value="pro" label="Pro" checked="true" />
    <noundry-radio value="enterprise" label="Enterprise" />
</noundry-radio-group>

Radio Group Properties

Property	Type	Default	Description
`asp-for`	ModelExpression	null	Model binding
`label`	string	null	Group label
`layout`	string	"vertical"	Layout: vertical, horizontal
`required`	bool	false	Required selection

Date Picker

Calendar-based date selection with min/max date constraints.

Select Date

Birth Date

View Code

<!-- Basic Date Picker -->
<noundry-date-picker label="Select Date"
                     placeholder="Choose a date" />

<!-- With Model Binding and Constraints -->
<noundry-date-picker asp-for="BirthDate"
                     label="Birth Date"
                     format="yyyy-MM-dd"
                     min-date="@DateTime.Now.AddYears(-100)"
                     max-date="@DateTime.Now" />

Date Picker Properties

Property	Type	Default	Description
`asp-for`	ModelExpression	null	Model binding
`label`	string	null	Field label
`placeholder`	string	"Select date"	Placeholder text
`format`	string	"yyyy-MM-dd"	Date format
`min-date`	DateTime?	null	Minimum date
`max-date`	DateTime?	null	Maximum date

Date Range Picker

Advanced date range selection with quick presets like "Last 7 days", "Last 30 days", etc.

View Code

<noundry-date-range-picker label="Report Period"
                           start-date-property="StartDate"
                           end-date-property="EndDate"
                           show-quick-select="true"
                           show-days-count="true"
                           quick-select-options="today,last7,last30,last90" />

Date Range Picker Properties

Property	Type	Default	Description
`label`	string	null	Field label
`start-date-property`	string	null	Start date model property
`end-date-property`	string	null	End date model property
`show-quick-select`	bool	true	Show preset buttons
`quick-select-options`	string	"today,yesterday,last7,last30,last90"	Available presets
`show-days-count`	bool	true	Show selected days count

Select

Dropdown selection with search capability. Supports both static options and server-side data binding.

Static Options

No results found

Server-Side Options

View Code

<!-- Static Options -->
<noundry-select asp-for="Country" placeholder="Select country" searchable="true">
    <noundry-option value="us">United States</noundry-option>
    <noundry-option value="uk">United Kingdom</noundry-option>
    <noundry-option value="ca">Canada</noundry-option>
</noundry-select>

<!-- Server-Side Bound Options -->
<noundry-select asp-for="Country"
                placeholder="Select country"
                options-source="Model.Countries"
                options-value-property="Value"
                options-text-property="Text" />

Select Properties

Property	Type	Default	Description
`asp-for`	ModelExpression	null	Model binding
`placeholder`	string	"Select option"	Placeholder text
`searchable`	bool	true	Enable search
`options-source`	IEnumerable	null	Server-side collection
`options-value-property`	string	"Value"	Value property name
`options-text-property`	string	"Text"	Text property name

Combobox

Searchable combo box with autocomplete. Users can type to filter options.

City

No results found

View Code

<noundry-combobox asp-for="City"
                  label="City"
                  placeholder="Start typing...">
    <noundry-combobox-option value="nyc">New York City</noundry-combobox-option>
    <noundry-combobox-option value="la">Los Angeles</noundry-combobox-option>
    <noundry-combobox-option value="chi">Chicago</noundry-combobox-option>
</noundry-combobox>

Multi-Select

Advanced multi-selection with tags. Select multiple options with visual tag display.

Static Options

Skills

Server-Side Options

View Code

<!-- Static Options -->
<noundry-multi-select asp-for="Skills" label="Skills" color="blue">
    <noundry-multi-select-option value="csharp">C#</noundry-multi-select-option>
    <noundry-multi-select-option value="js">JavaScript</noundry-multi-select-option>
</noundry-multi-select>

<!-- Server-Side Bound Options -->
<noundry-multi-select asp-for="SelectedServices"
                      label="Services"
                      options-source="Model.AvailableServices"
                      options-value-property="Id"
                      options-text-property="Name"
                      color="green" />

<!-- API-Loaded Options -->
<noundry-multi-select label="Team Members"
                      use-api="true"
                      api-url="/api/users"
                      api-id-property="id"
                      api-name-property="fullName" />

Multi-Select Properties

Property	Type	Default	Description
`asp-for`	ModelExpression	null	Model binding
`label`	string	null	Field label
`use-api`	bool	false	Load from API
`api-url`	string	null	API endpoint
`options-source`	IEnumerable	null	Server-side collection
`color`	string	"blue"	Tag color: blue, green, red, gray

Range Slider

Slider input for numeric ranges. Perfect for price filters, volume controls, etc.

Volume 0.00

0 100

Price Range 0.00

0 1000

Rating Filter 1.00

1 5

View Code

<noundry-range-slider asp-for="Price"
                      label="Price Range"
                      min="0"
                      max="1000"
                      step="10"
                      show-value="true" />

Range Slider Properties

Property	Type	Default	Description
`asp-for`	ModelExpression	null	Model binding
`label`	string	null	Field label
`min`	int	0	Minimum value
`max`	int	100	Maximum value
`step`	int	1	Step increment
`show-value`	bool	true	Show current value

Complete Form Example

A complete form demonstrating multiple form controls working together.

First Name *

Last Name *

Email *

Bio

0/500

No results found

Start Date

Subscription Plan

Free

Pro

Enterprise

Email notifications

I agree to the terms