// Generated by scripts/generate-showcase.mjs. Do not edit directly. page InputGroupDetail { layout = "showcase" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_id = ctx.url.searchParams.get("pg_id") ?? "input-group-1" state playground_name = ctx.url.searchParams.get("pg_name") ?? "input-groupField" state playground_label = ctx.url.searchParams.get("pg_label") ?? "Workspace" state playground_hiddenLabel = ctx.url.searchParams.get("pg_hiddenLabel") ?? "false" state playground_value = ctx.url.searchParams.get("pg_value") ?? "" state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter input group" state playground_type = ctx.url.searchParams.get("pg_type") ?? "text" state playground_startText = ctx.url.searchParams.get("pg_startText") ?? "https://" state playground_endText = ctx.url.searchParams.get("pg_endText") ?? ".app" state playground_icon = ctx.url.searchParams.get("pg_icon") ?? "" state playground_iconPosition = ctx.url.searchParams.get("pg_iconPosition") ?? "start" state playground_actionLabel = ctx.url.searchParams.get("pg_actionLabel") ?? "Check" state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? "Helpful context for this field." state playground_cornerHint = ctx.url.searchParams.get("pg_cornerHint") ?? "" state playground_error = ctx.url.searchParams.get("pg_error") ?? "" state playground_inline = ctx.url.searchParams.get("pg_inline") ?? "false" state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "normal" state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false" state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" state playground_required = ctx.url.searchParams.get("pg_required") ?? "false" state playground_class = ctx.url.searchParams.get("pg_class") ?? "" seo { title = "Input Group" description = "Theme-aware, responsive input group component." } view {
Forms component

Input Group

Theme-aware, responsive input group component.

23 props0 slots6 eventsTheme readyResponsive
Interactive playground

Configure Input Group

Change any prop and inspect the server-rendered component immediately.

Live preview
Component code
<InputGroup
  id="input-group-1"
  name="input-groupField"
  label="Workspace"
  placeholder="Enter input group"
  startText="https://"
  endText=".app"
  actionLabel="Check"
  helperText="Helpful context for this field."
/>
Component props23 controls
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Basic usage

Default field

Use a labelled field with a value, placeholder, and supporting helper text.

01
Live preview
Component usage.wrn
<InputGroup
  id="input-group-1"
  name="input-groupField"
  label="Workspace"
  placeholder="Enter input group"
  startText="https://"
  endText=".app"
  actionLabel="Check"
  helperText="Helpful context for this field."
/>
Appearance

Outlined with start icon

Combine an outlined treatment with a leading icon.

02
Live preview
Component usage.wrn
<InputGroup
  id="input-group-2"
  name="input-groupField"
  label="Workspace"
  placeholder="Enter input group"
  startText="https://"
  endText=".app"
  icon="icon-[lucide--sparkles]"
  variant="outlined"
/>
Appearance

Floating label

Move the label into the control while preserving an accessible field name.

03
Live preview
Component usage.wrn
<InputGroup
  id="input-group-3"
  name="input-groupField"
  label="Workspace"
  placeholder="Enter input group"
  startText="https://"
  endText=".app"
  icon="icon-[lucide--circle-user-round]"
  iconPosition="end"
  variant="floating"
/>
Appearance

Pill and compact size

Use pill styling and compact sizing in dense interfaces.

04
Live preview
Component usage.wrn
<InputGroup
  size="sm"
  id="input-group-4"
  name="input-groupField"
  label="Workspace"
  placeholder="Enter input group"
  startText="https://"
  endText=".app"
  variant="pill"
/>
States

Read only

Display a submitted value without allowing it to be changed.

05
Live preview
Component usage.wrn
<InputGroup
  id="input-group-5"
  name="input-groupField"
  label="Workspace"
  value="wirejs"
  placeholder="Enter input group"
  startText="https://"
  endText=".app"
  readonly="true"
/>
States

Disabled

Prevent interaction and communicate that the field is unavailable.

06
Live preview
Component usage.wrn
<InputGroup
  id="input-group-6"
  name="input-groupField"
  label="Workspace"
  placeholder="Enter input group"
  startText="https://"
  endText=".app"
  disabled="true"
/>
Layout

Inline helper text

Place the label, control, and supporting text on one responsive line.

07
Live preview
Component usage.wrn
<InputGroup
  id="input-group-7"
  name="input-groupField"
  label="Workspace"
  placeholder="Enter input group"
  startText="https://"
  endText=".app"
  helperText="We'll never share your details."
  inline="true"
/>
Layout

Field with corner hint

Place optional context opposite the label and keep the control on the next line.

08
Live preview
Component usage.wrn
<InputGroup
  id="input-group-8"
  name="input-groupField"
  label="Workspace"
  placeholder="Enter input group"
  startText="https://"
  endText=".app"
  cornerHint="Optional"
/>
Validation

Validated field

Surface validation through @wrnexus/validation-compatible error targets and accessible state.

09
Live preview
Component usage.wrn
<InputGroup
  id="input-group-9"
  name="validatedField"
  label="Workspace"
  placeholder="Enter input group"
  startText="https://"
  endText=".app"
  required="true"
/>
Component events

Events

Public events declared by this component. Custom events bubble from the component root and expose state through event.detail.

@inputFires immediately as the component value changes.
@changeFires when the component value or selection changes.
@focusFires when the component receives focus.
@blurFires when focus leaves the component.
@submitFires when the component submits its value.
@actionFires when the component's action is selected.
Event listener.js
const component = document.querySelector('[data-wrn-events]')

component.addEventListener('input', (event) => {
  console.log(event.detail)
})
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
idstring""No
namestring""No
labelstring"Input group"No
hiddenLabelbooleanfalseNo
valuestring""No
placeholderstring""No
typestring"text"No
startTextstring""No
endTextstring""No
iconstring""No
iconPositionstring"start"No
actionLabelstring""No
helperTextstring""No
cornerHintstring""No
errorstring""No
inlinebooleanfalseNo
variantstring"normal"No
readonlybooleanfalseNo
disabledbooleanfalseNo
requiredbooleanfalseNo
classstring""No
} }