Form

Source API

The Form component in Punica CSS Framework offers a robust and flexible structure for creating user input elements, including text fields, checkboxes, radio buttons, and dropdowns. With support for customization and validation, it ensures an intuitive and accessible user experience.

Name This is my description

Form inputs in Punica are designed to adapt seamlessly to your form's layout requirements. You can specify a custom column count per row, with the default system supporting up to five items. For instance, using the .three.items classes will arrange three items in the first row, with the fourth item automatically flowing to the second row. This flexibility ensures clean and organized form layouts.

First This is my description

Second This is my description

Third This is my description

Fourth This is my description

You can indicate the validation state of form fields using the .error, .warning, or .success classes. Simply add the appropriate class to the input, textarea, or select elements to reflect the desired validation state.

Success Valid name

Warning Invalid item

Error Invalid name

You can group form elements such as select, input, or button together with an input field. To apply this, add the .group class to a container within the .item wrapper.

Search by

This is my description

Add the .small or .large class to .form class to make it smaller or larger inputs or buttons.

Small Size

Large Size

Checkbox

Radio

Two Items

Checkbox

Four Items

Radio

Using Utilities

Success

Warning

Error

Dark

Using Utilities

Success

Warning

Error

Dark

Props
Default Class Name	Combinators
`form`	`.form`
`items`	`.form > .items`
`item`	`.form > .item` `.form > .items >.item`
`checkbox`	`.form > .item > .checkbox` `.form > .items >.item > .checkbox`
`radio`	`.form > .item > .radio` `.form > .items >.item > .radio`
`group`	`.form > .item > .group` `.form > .items >.item > .group`
Sizes	Combinators
`small`	`.small.form`
`large`	`.large.form`
Validations	Combinators
`success`	`.success`
`warning`	`.warning`
`error`	`.error`
Max Items (2 through 6)	Combinators
`two`	`.two.items`
`three`	`.three.items`
`four`	`.four.items`
`five`	`.five.items`
`six`	`.six.items`