ControlElement

This is basically a wrapper that removes border, shadow, margin from the inside element and gives it a label.

It gives an inner element a freedom to be whatever it wants.

Live Demo

You can add label here

Sizes

The size prop controls font-size, padding, border-radius, and element sizing across all wrapped components. Available sizes: sm, md (default), lg, xl.

Input

Small

Medium (default)

Large

Extra Large

Input with Icons

Textarea

Small

Medium

Large

Extra Large

Button

Button with Icons

NavButton

Home

Home

Home

Home

SwitchButton

Selector

Small

Medium

Large

Extra Large

CheckBox

Small

Medium

Large

Extra Large

Inner Layout

Input and Textarea support layout="inner", which floats the label inside the control boundary. The label starts as a placeholder and animates upward when the field is focused or filled.

Input

Full Name

Email Address

Password

Search

Website

Textarea

Notes

Feedback

Inner with sizes

Small

Medium (default)

Large

Extra Large

Usage

<template>
  <orio-control-element label="You can add label here">
    <input
      type="text"
      placeholder="Notice standard styling is not a case here"
      style="width: stretch"
    />
  </orio-control-element>
</template>

Setting Size

<!-- Size applies to any component wrapped with ControlElement -->
<orio-input v-model="name" label="Name" size="sm" />
<orio-input v-model="name" label="Name" size="md" />
<orio-input v-model="name" label="Name" size="lg" />
<orio-input v-model="name" label="Name" size="xl" />

<orio-button size="lg">Large Button</orio-button>
<orio-selector v-model="value" :options="options" size="sm" />

Props

Prop	Type	Default	Description
appearance	'normal' | 'minimal'	'normal'	Minimal removes margin, border, and box-shadow from slot
size	'sm' | 'md' | 'lg' | 'xl'	'md'	Controls font-size, padding, and radius of inner elements
layout	'vertical' | 'horizontal'	'vertical'	Label position relative to the control
label	string	-	Label text displayed above the control

Slots

Slot	Description
default	Form control element

The default slot exposes a control prop — the attribute bag your inner element must spread. Every key is already written as the DOM attribute it becomes, so v-bind is all that is needed:

<orio-control-element v-slot="{ control }" label="Email" :error="emailError">
  <input v-bind="control" type="email" />
</orio-control-element>

Accessibility

Bag key	Source
id	id prop, or useId() — the <label for> target
tabindex	tabindex prop
disabled	disabled prop
required	required prop
name	name prop
focus-key	focusKey prop — the attr useRovingGrid queries
aria-label	ariaLabel prop — for controls with no visible label
aria-describedby	id of the .control-error span, when error is set
aria-invalid	"true" when error is set
aria-required	required prop

Keys are omitted when there is nothing to say, so no empty aria-label="" reaches the markup.

CSS Variables

ControlElement sets the following CSS custom properties based on size, which child components consume:

Variable	sm	md (default)	lg	xl
--control-font-size	0.75rem	0.875rem	1.25rem	1.75rem
--control-label-font-size	0.65rem	0.75rem	0.875rem	1.25rem
--control-py	0.25rem	0.5rem	0.625rem	0.75rem
--control-px	0.5rem	0.75rem	1rem	1.25rem
--control-gap	0.25rem	0.5rem	0.5rem	0.75rem
--control-radius	4px	8px	8px	12px
--control-icon-size	0.75rem	1rem	1.25rem	1.5rem

Notes

• Used internally by Input, Textarea, DatePicker, etc.
• Provides consistent spacing and layout
• Can be used to wrap custom form controls
• The label is passed via attributes and rendered automatically
• Size cascades via CSS variables — child components read them automatically