Core Examples
Accessible React components with Base UI and Yumma CSS.
Base
Standard implementation with default configuration.
Disabled
Prevents interaction with reduced visual emphasis.
Helper
Includes helper text beneath the input.
Label
Adds a Label component for accessible context.
Icon Examples
Icon-only buttons and decorative configurations.
Leading
Positions the Icon at the start of the content.
Trailing
Positions the Icon at the end of the content.
Size Examples
Sizes from compact to large.
Large
Expanded size for emphasis or easier targeting.
Medium
Standard default size.
Small
Compact size for constrained spaces.
Shape Examples
Shapes from sharp to fully rounded.
Square
Applies sharp corners with no br-(value).
Squircle
Applies a smooth continuous curve between adjacent corners.
More Examples
Additional variants and interactive states.
Button
Places a Button action inside the component.
Error
Displays validation feedback in a hardcoded error state.
Password
Uses a Field.Password for masked input.
Prefix
Adds a Prefix adornment inside the input.
Success
Displays the component in a success state.
Suffix
Adds a Suffix adornment inside the input.