Forms are one of the things that move forward the interface, that's why in Puppertino, form elements come with ready-to-work, native validation. You can use the Forms using the CSS of Forms or downloading the full CSS (Not recommended if you are just going to use this component).
The select box works exactly as expected, and you can change the width and height without affecting the overall composition of the element without problems. The select does not have native validation, but you can still add the p-form-invalid and p-form-valid classes respectively.
Usage:
<div class="p-form-select">
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
Text fields are everything that gets text into it, maybe passwords,
emails, messages, anything you want. They can have validation,
truncated text, or be just plain without any of those things. The
validated input relies on native HTML validation, so
things like min-length or
type will work perfectly on it. The
validation will be visible once the user changes the focus out of the
element, and I prefer it this way to avoid users getting confused
while they type. The no-validated input retains its style whenever
the input is invalid or valid. The truncated text, adds three dots
(...) at the end when of the input if the text overflows from it. The
appearance of the dots takes place after the user changes the focus
out of the element. The truncated text does not disable the validation.
It is also possible to add labels to every type of input without it
affecting in any way the functionality of the input.
About the validation: You should always include a placeholder if you were intending
to use validation. If you don't intend to validate the input
text, you can add the class
p-form-no-validate.
Text fields can be textareas or inputs.
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 are bigger versions of the original inputs. The intended usage of this is login or registration forms.
The alternate inputs work similarly to the default input. The only thing that changes is the class, but validation and others work exactly as expected.
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 are similar to checkboxes, the main difference between radio buttons and checkboxes, is that radio buttons can only one of them in a group of radio buttons can be checked. Radio buttons do not provide any type of validation. And come with a nice, simple animation. You can change the width and height of the radio buttons without being worried about breaking the composition.
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, allow the users to select several predefined values. Checkboxes in puppertino, just as Radio buttons, support changing the width and height without damaging the composition of the checkbox.
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 are essentially checkboxes, but cooler. This makes it easier and more interactive for the user to select multiple items or filter information. They come in several flavors and also have support for icons.
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 are part of those elements that are popular in iOS devices.
And I wasn't going to add them until version 2.0 (Since I wanted to
create a custom element) But a friend gave me the starter code and I
just cleaned it a bit and made it look like the aesthetic of
Puppertino. So big shotout to Ivanot because he
essentially created this element :)
The Switch is essentially a checkbox, so you have to expect it to work
as one. You can change the width and height of the switch changing the
variable --width inside the class
p-form-switch. Everything in the element
will resize automatically so don't worry about breaking it on resize.
Usage:
<label class="p-form-switch">
<input type="checkbox">
<span></span>
</label>
These buttons are a really small version of the buttons component of Puppertino, just to add send and cancel buttons.
Usage:
<input type="submit" class="p-form-button p-form-send">
<input type="reset" class="p-form-button">
Let's say that you are working on a type of validation that can't be
done with native HTML validation, can you use the validation of
Puppertino? Of course, you can.
To use validations in your code, you can use the classes
p-form-invalid and
p-form-valid respectively. You can add or
remove these classes as you may need. But don't add both at the same
time. Also, here in Puppertino we don't encourage validation in
real-time. Since we think is better for the user to see the validation
once he changes the focus of the input.
Please be aware that
using these classes will disable the default validation.
Usage:
<input type="text" class="p-form-text p-form-invalid">
<input type="text" class="p-form-text p-form-valid">