Skip to content
Proto UI
Preview runtime
选择适配器 Runtime Web ComponentsReactVueVue 2
Preferences and community
Language
选择语言 / Select Language English English简体中文 简体中文
Community

Search

Loading search…
Toggle theme

Brutalist Select

Rounded, flat-by-default Select over Base Select

Select keeps Base value-class presentation parts and selection semantics under a Neo-Brutalist surface language.

Loading interactive preview… The article and source are ready to read. Interactive controls will appear here when ready.

Trigger appearance

Section titled “Trigger appearance”

The default Trigger follows the upstream Select: a flat 5px-rounded, 2px black frame with DM Sans 500. appearance="elevated" is an explicit Proto UI extension for a Trigger grouped with raised commands, such as the Header Runtime and Style controls. Its hard black shadow is 4px right/down at rest; hover or press moves the Trigger 4px right/down and removes that shadow. Press does not add another offset.

Set the prop on brutalist-select-trigger, not Root or Content. appearance="flat", omission, or removing the prop restores the flat default. size="sm" | "default", the paired fill/ink, focus ring, keyboard selection and disabled behavior are unchanged. Content stays flat in either appearance. Page CSS must not add a replacement shadow.