UltraKit · Widget #15

8 Form Themes × 6 Input Styles × 6 Button Styles × 5 Focus Effects

8 Wrapper Card Style8 Quick Theme6 Input Style6 Button Style3 Label Position3 Button Width2 Toggles
Section 01

8 options for wrapper card style — all shown live below.

1
None (bare form)wrapper_style = wrapper-none
2
Style 1: White Card + Shadowwrapper_style = wrapper-1
3
Style 2: Soft Tinted Cardwrapper_style = wrapper-2
4
Style 3: Dark Cardwrapper_style = wrapper-3
5
Style 4: Glassmorphismwrapper_style = wrapper-4
6
Style 5: Bordered Accentwrapper_style = wrapper-5
7
Style 6: Gradient Backgroundwrapper_style = wrapper-6
8
Style 7: Neumorphicwrapper_style = wrapper-7
Section 02

8 options for quick theme — all shown live below.

1
Theme 1: Default (white inputs)form_theme = theme-default
2
Theme 2: Minimal Underlineform_theme = theme-minimal
3
Theme 3: Bold Filledform_theme = theme-bold
4
Theme 4: Dark Modeform_theme = theme-dark
5
Theme 5: Gradient Accentform_theme = theme-gradient
6
Theme 6: Rounded Pillform_theme = theme-rounded
7
Theme 7: Glassmorphismform_theme = theme-glass
8
Theme 8: Neumorphicform_theme = theme-neo
Section 03

6 options for input style — all shown live below.

1
Style 1: Full Outline Boxinput_style = input-outline
2
Style 2: Bottom Border Onlyinput_style = input-underline
3
Style 3: Filled Backgroundinput_style = input-filled
4
Style 4: Shadow Cardinput_style = input-shadow
5
Style 5: Pill / Roundedinput_style = input-pill
6
Style 6: Glassmorphisminput_style = input-glass
Section 04

6 options for button style — all shown live below.

1
Style 1: Solid Fillbtn_style = btn-solid
2
Style 2: Outlinebtn_style = btn-outline
3
Style 3: Gradientbtn_style = btn-gradient
4
Style 4: Deep Shadowbtn_style = btn-shadow
5
Style 5: Pill Capsulebtn_style = btn-pill
6
Style 6: 3D Pressbtn_style = btn-3d
Section 05

3 options for label position — all shown live below.

1
Above Inputlabel_position = above
2
Hidden (placeholder only)label_position = hidden
3
Inline (left of input)label_position = inline
Section 06

3 options for button width — all shown live below.

1
Auto (fit content)btn_width = auto
2
Full Widthbtn_width = full
3
50%btn_width = half
Section 07

Switch parts of the widget on or off.

1
Show Form Header — Onshow_form_header = yes
2
Hide On Desktop — Onhide_desktop = hidden-desktop