Composite Input Controls: Input Group

🌏 Translated with the assistance of DeepSeek and ChatGPT

Used to combine various input controls and buttons together.

Basic Usage

Combines various input controls and buttons. Currently supported components:

• Input
• InputNumber
• InputTag
• AutoComplete
• Select
• Button
• InputGroupLabel

.ini

<template>
	<px-space direction="vertical">
		<px-input-group>
			<px-input-group-label>
				<IconSearch></IconSearch>
			</px-input-group-label>
			<px-input placeholder="Please input"> </px-input>
			<px-button>Search</px-button>
		</px-input-group>
		<px-input-group>
			<px-input placeholder="Please input file name"> </px-input>
			<px-input-group-label> .ini </px-input-group-label>
		</px-input-group>
		<px-input-group>
			<px-input placeholder="Please input"> </px-input>
			<px-input-number placeholder="Please input" :default-value="0"> </px-input-number>
		</px-input-group>
	</px-space>
</template>
<script setup lang="ts">
import { IconSearch } from '@pixelium/web-vue/icon-hn/es'
</script>
<style lang="css" scoped>
.px-input,
.px-input-number {
	width: 320px;
}
</style>

Rounded Borders

The shape property controls the overall shape.

borderRadius sets the button corner radius; it takes precedence over shape and behaves like the CSS border-radius property.

Due to limited time and resources, custom rounded corners still need refinement, but overall usability is not affected.

<template>
	<px-space direction="vertical">
		<px-input-group shape="round">
			<px-input-group-label>
				<IconSearch></IconSearch>
			</px-input-group-label>
			<px-input placeholder="Please input"> </px-input>
			<px-button>Search</px-button>
		</px-input-group>
		<px-input-group :border-radius="[20, 16, 20, 16]">
			<px-input-group-label>
				<IconSearch></IconSearch>
			</px-input-group-label>
			<px-input placeholder="Please input"> </px-input>
			<px-button>Search</px-button>
		</px-input-group>
	</px-space>
</template>
<script setup lang="ts">
import { IconSearch } from '@pixelium/web-vue/icon-hn/es'
</script>
<style lang="css" scoped>
.px-input {
	width: 320px;
}
</style>

Control Sizes

The size property controls the dimensions of the controls.

<template>
	<px-space direction="vertical">
		<px-input-group size="small">
			<px-input-group-label>
				<IconBolt></IconBolt>
			</px-input-group-label>
			<px-input-number placeholder="Please input number" :default-value="0"> </px-input-number>
			<px-button>Confirm</px-button>
		</px-input-group>
		<px-input-group>
			<px-input-group-label>
				<IconBolt></IconBolt>
			</px-input-group-label>
			<px-input-number placeholder="Please input number" :default-value="0"> </px-input-number>
			<px-button>Confirm</px-button>
		</px-input-group>
		<px-input-group size="large">
			<px-input-group-label>
				<IconBolt></IconBolt>
			</px-input-group-label>
			<px-input-number placeholder="Please input number" :default-value="0"> </px-input-number>
			<px-button>Confirm</px-button>
		</px-input-group>
	</px-space>
</template>

<script setup lang="ts">
import { IconBolt } from '@pixelium/web-vue/icon-hn/es'
</script>

<style lang="css" scoped>
.px-input-number {
	width: 320px;
}
</style>

Disabled State

The disabled attribute applies a disabled state to all child controls.

<template>
	<px-input-group disabled>
		<px-input placeholder="Please input"> </px-input>
		<px-input-number placeholder="Please input" :default-value="0"> </px-input-number>
	</px-input-group>
</template>
<style lang="css" scoped>
.px-input,
.px-input-number {
	width: 320px;
}
</style>

API

InputGroupProps

Attribute	Type	Optional	Default	Description	Version
borderRadius	NumberOrPercentage | NumberOrPercentage[]	True			0.0.2
shape	'default' | 'round'	True	'default'	Component shape, overrides the shape of child components; rounding only affects the outer borders on both sides of the child components.	0.0.2
size	'medium' | 'large' | 'small'	True	'medium'	Component size, overrides the size of child components.	0.0.2
disabled	boolean	True	false	Whether to disable. The disabled prop of the child component and this prop are OR-ed to determine if the child component is disabled.	0.0.2

InputGroupSlots

Slot	Parameter	Description	Version
default		Components to be grouped.	0.0.2

InputGroupLabelProps

Attribute	Type	Optional	Default	Description	Version
backgroundColor	string	True		Background color. Supports CSS-like strings such as 'rgb(r, g, b)' and 'rgba(r, g, b, a)', as well as 3-, 4-, 6-, and 8-digit hexadecimal values.	0.0.2
borderRadius	NumberOrPercentage | NumberOrPercentage[]	True			0.0.2
shape	'default' | 'round'	True	'default'	Component shape.	0.0.2
size	'medium' | 'large' | 'small'	True	'medium'	Component size.	0.0.2

InputGroupLabelSlots

Slot	Parameter	Description	Version
default		Label content.	0.0.2

NumberOrPercentage

export type NumberOrPercentage = number | `${number}%`