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

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

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