Forms

Select.

The select box in Puppertino is designed to behave as expected while offering flexibility in customization. You can adjust the width and height without compromising the overall composition or functionality of the element.

Note: The select box does not include native validation. However, you can manually apply validation states by adding the following classes:

• p-form-invalid: Indicates an invalid input.
• p-form-valid: Indicates a valid input.

Usage:

				
<div class="p-form-select">
	<select>
		<option>Option 1</option>
		<option>Option 2</option>
		<option>Option 3</option>
	</select>
</div>
				
			

Text fields.

Text fields are versatile elements for capturing user input such as passwords, emails, messages, or any type of text data. Puppertino provides flexible options for text fields, supporting validation, truncation, and plain (non-validated) inputs.

Features of Text Fields

• Validation: Supports native HTML validation (e.g., min-length, type). Feedback is shown after focus leaves the field. Use p-form-no-validate to disable validation styling.
• Truncated Text: Adds an ellipsis (...) when text overflows, visible after focus shifts. Compatible with validation.
• Plain Inputs: Keeps consistent styling regardless of validity, ideal for non-validated fields.
• Labels: Fully compatible with all input types for enhanced accessibility.

Usage:

				

<input type="email" class="p-form-text" placeholder="email@example.com">

<input type="text" class="p-form-text p-form-no-validate" placeholder="free text">

<input type="email" class="p-form-text p-form-truncated" placeholder="Truncated text...">

<label class="p-form-label">Email: <input type="email" class="p-form-text" placeholder="email@example.com"></label>

				
			

Alternate inputs.

Alternate inputs are larger versions of the standard text fields, ideal for use in login or registration forms.

They function identically to default inputs, with the same validation and styling options. The only difference is the class applied to the element.

Usage:

        

<input type="email" class="p-form-text-alt" placeholder="email@example.com">

<input type="text" class="p-form-text-alt p-form-no-validate" placeholder="free text">

<input type="email" class="p-form-text-alt p-form-truncated" placeholder="Truncated text...">

<label class="p-form-label">Email: <input type="email" class="p-form-text-alt" placeholder="email@example.com"></label>

<label class="p-form-label-inline">Email: <input type="email" class="p-form-text-alt" placeholder="email@example.com"></label>

        
      

Radio Buttons.

Radio buttons resemble checkboxes but allow only one selection per group. They lack validation but feature a smooth animation. Width and height can be adjusted without compromising their layout.

Usage:

				

<label class="p-form-radio-cont">
	<input type="radio" name="example">
	<span> </span>
	Thing one
</label>

<label class="p-form-radio-cont">
	<input type="radio" name="example">
	<span> </span>
	Thing two
</label>

				
			

Checkboxes.

Checkboxes let users select multiple predefined options. Like radio buttons, Puppertino checkboxes support adjustable width and height without affecting their layout.

Usage:

				

<label class="p-form-checkbox-cont">
	<input type="checkbox" name="example">
	<span> </span>
	Thing one
</label>

<label class="p-form-checkbox-cont">
	<input type="checkbox" name="example">
	<span></span>
	Thing two
</label>

				
			

Chips.

Chips are an enhanced, interactive alternative to checkboxes, offering a more engaging way for users to select multiple items or filter information. They come in various styles and support the inclusion of icons for added functionality.

Usage:

        

<label class="p-chip">
  <input type="checkbox" />
  <span>Default</span>
</label>

<label class="p-chip p-chip-dark p-chip-radius-b">
  <input type="checkbox" />
  <span>Border</span>
</label>

<label class="p-chip p-chip-outline">
  <input type="checkbox" />
  <span>Outline</span>
</label>

<label class="p-chip p-chip-outline-to-bg">
  <input type="checkbox" />
  <span>Outline to bg</span>
</label>

<label class="p-chip p-chip-radius-b">
  <input type="checkbox" />
  <span>Combined</span>
</label>

<label class="p-chip">
  <input type="checkbox" disabled />
  <span>Disabled</span>
</label>

<label class="p-chip p-chip-big">
  <input type="checkbox" />
  <span>
<!-- SVG -->
    Icon</span>
</label>
        
      

Switches.

Switches are inspired by popular iOS design elements and were introduced to Puppertino with help from a friend and contributor, Ivanot. A special thanks to him for providing the foundation for this component!

Switches function like checkboxes and are styled to fit the Puppertino aesthetic. You can adjust their size by modifying the --width variable within the p-form-switch class. The element resizes automatically, ensuring consistent appearance and functionality.

Usage:

				

<label class="p-form-switch">
	<input type="checkbox">
	<span></span>
</label>

				
			

Buttons. Deprecated

These are smaller versions of the Puppertino button component, designed for simple actions like "Send" or "Cancel." However, this component will be removed in future versions. We recommend transitioning to the full button component for better support and functionality.

Usage:

				

<input type="submit" class="p-form-button p-form-send">

<input type="reset" class="p-form-button">

				
			

Custom Validation.

Need to handle a type of validation that HTML doesn’t natively support? Puppertino has you covered.

How to Use Puppertino Validation

• Use the p-form-invalid and p-form-valid classes to indicate validation states.
• Add or remove these classes as needed, but never apply both simultaneously.
• Validation feedback appears after the user moves focus out of the input field, ensuring a smoother experience.

Important: Applying these classes disables default HTML validation, so use them when custom validation logic is required.

Usage:

				

<input type="text" class="p-form-text p-form-invalid">

<input type="text" class="p-form-text p-form-valid">