🌏 Translated with the assistance of DeepSeek and ChatGPT

Composite Input Controls: Input Group

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
• ColorPicker
• TimePicker
• DatePicker
• DateTimePicker

.ini

Hide source code

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.

Hide source code

Control Sizes

The size property controls the dimensions of the controls.

Hide source code

Disabled State

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

Hide source code

API

InputGroupProps

Attribute	Type	Optional	Default	Description	Version
borderRadius	NumberOrPercentage | NumberOrPercentage[]	True		Corner radius, takes precedence over shape, overrides the borderRadius of child components; rounding only affects the outer borders on both sides of the child components. Behaves like CSS border-radius — a single value or array of length 1 → applies to all four corners; length 2 → [top-left & bottom-right, top-right & bottom-left]; length 3 → [top-left, top-right & bottom-left, bottom-right]; length 4 → applies to the four corners in a clockwise order.	0.0.2
shape	'rect' | 'round'	True	'rect'	Component shape, overrides the shape of child components; rounding only affects the outer borders on both sides of the child components.	0.0.3
size	'medium' | 'large' | 'small'	True	'medium'	Component size, overrides the size of child components.	0.0.2
disabled	boolean	True	false	Whether to disable.	0.0.2
readonly	boolean	True	false	Whether the input-group is readonly.	0.0.3
pollSizeChange	boolean	True	false	Enables polling for component size changes. This also affects the property of the same name in data input components that are child components.	0.1.0

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. See Supported Color Parsing.	0.0.2
borderRadius	NumberOrPercentage | NumberOrPercentage[]	True		Corner radius, takes precedence over shape. Behaves like CSS border-radius — a single value or array of length 1 → applies to all four corners; length 2 → [top-left & bottom-right, top-right & bottom-left]; length 3 → [top-left, top-right & bottom-left, bottom-right]; length 4 → applies to the four corners in a clockwise order.	0.0.2
shape	'rect' | 'round'	True	'rect'	Component shape.	0.0.3
size	'medium' | 'large' | 'small'	True	'medium'	Component size.	0.0.2
pollSizeChange	boolean	True	false	Enables polling for component size changes. This may impact performance.	0.1.0

InputGroupLabelSlots

Slot	Parameter	Description	Version
default		Label content.	0.0.2

NumberOrPercentage

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