Forms
To add nice styles to a form, simply add the .ui-form class. You'll now get nice styling out of the box for Text Fields, Selects, Datepickers, Text areas and more.
<form class="ui-form">
...
</form>
Removing Styles Individually
To remove default styles from the entire form, add the .no-style class to the form or the input
Variables
--ui-input-color: var(--ui-color-grey-800);
--ui-form-input-padding-small-screens: 0.5rem 0rem;
--ui-form-input-width: 100%;
--ui-input-border-radius: var(--ui-shared-border-radius);
--ui-input-border-width: var(--ui-shared-border-width);
--ui-input-padding: 0.75rem;
--ui-form-input-border-color: var(--ui-color-grey-200);
--ui-form-input-border-color-focus: var(--ui-color-grey-900);
--ui-form-input-border-color-invalid: rgba(239, 68, 68);
--ui-form-input-height: 3rem;
--ui-form-input-line-height: 1rem;
--ui-form-select-line-height: 1.2rem;