Winnie CSS
  1. Primitives
  2. input-group

input-group

Captures user input. 

<div data-component="input-group">
  <i class="search" data-slot="icon"></i>
  <input data-component="input" data-slot="input" />
</div>

Import

Import just the input-group styles.

@import "@winnie-ui/css/spatial/input-group";
@import "@winnie-ui/css/visual/input-group";

Anatomy

Attach the appropriate data attributes in the structure below.

<div data-component="input-group">
  <span data-slot="action" />
  <i data-slot="icon" />
  <element data-slot="input" />
  <i data-slot="icon" />
  <kbd data-slot="shortcut" />
  <span data-slot="action" />
</div>

Examples

Size

Use the data-size attribute to change the size.

 
<div data-component="input-group" data-size="<size>">
  <input data-slot="input" data-component="input" />
</div>

Radius

Use the data-radius attribute to change the radius.

 
<div data-component="input-group" data-radius="<radius>">
  <input data-slot="input" data-component="input" />
</div>

Icon

Use the icon slot attribute to place an icon at the beginning or end of the input group.

 
<div data-component="input-group">
  <i class="search" data-slot="icon"></i>
  <input data-slot="input" data-component="input" />
</div>
<div data-component="input-group">
  <input data-slot="input" data-component="input" />
  <i class="chevron-up-down" data-slot="icon"></i>
</div>

Cap

Use the cap slot attribute to place content at the beginning or end of the input group. The cap acts a placeholder for any content you wish to put into it. It is up to you to style that content appropriately.

https://
.winnie-ui.com 
<div data-component="input-group">
  <span data-slot="cap">https://</span>
  <input data-slot="input" data-component="input" />
</div>
<div data-component="input-group">
  <input data-slot="input" data-component="input" />
  <span data-slot="cap">.winnie-ui.com</span>
</div>

Action

Use the action slot attribute to place an action at the end of the input group.

 
<div data-component="input-group">
  <input data-slot="input" data-component="input" />
  <button data-slot="action" data-component="button" data-size="sm">
    <i class="cross"></i>
  </button>
</div>

Shortcut

Use the shortcut slot attribute with the kbd component to place a shortcut at the end of the input group. These shortcuts typically only apply to users on screens larger than 768px, so we hide them for any viewport width smaller than that.

⌘ K 
<div data-component="input-group">
  <input data-slot="input" data-component="input" />
  <kbd data-slot="shortcut">
    <kbd data-component="kbd">⌘</kbd>
    <kbd data-component="kbd">K</kbd>
  </kbd>
</div>

Disabled

Use the disabled attribute to prevent user interaction.

/ 
<div data-component="input-group">
  <i class="search" data-slot="icon"></i>
  <input data-slot="input" data-component="input" disabled />
  <kbd data-slot="shortcut">
    <kbd data-component="kbd">/</kbd>
  </kbd>
</div>

Invalid

Input group will respect the :invalid selector when it is used in a form. Use the data-invalid attribute to manually control the invalid state of the input-group.

 
<div data-component="input-group">
  <input data-slot="input" data-component="input" data-invalid="true" />
</div>

Reference

input-group

Groups all of the parts of the input-group together.

AttributeValue
data-radius"none" | "sm" | "md" | "lg" | "round"
data-size"sm" | "md" | "lg"
ModifierDescription
hoveredWhen the input-group is hovered with a mouse
pressedWhen the input-group is pressed with a mouse or keyboard
disabledWhen the input-group prevents user interaction
invalidWhen the input-group is in an invalid state in a form
Variable
--wui-input-group-background-<?modifier>
--wui-input-group-border-<?modifier>
--wui-input-group-box-shadow-<?modifier>
--wui-input-group-color-<?modifier>
--wui-input-group-placeholder-color-<?modifier>

kbd

Single key in the shortcut slot.

ModifierDescription
disabledWhen the input-group prevents user interaction
Variable
--wui-input-group-kbd-background-<?modifier>
--wui-input-group-kbd-border-<?modifier>
--wui-input-group-kbd-box-shadow-<?modifier>
--wui-input-group-kbd-color-<?modifier>