Input group

A variation of a standard input but these have additional indicators that are places at the start and/or end of the field. This is a fixed visual indicator as to what the value of the field relates to.

Installation

Coming soon…

Examples

Input group - Prefix


                                                        
                                                        
                                                            <co-input-group label="Label">
                                                            <span slot="prefix">£</span>
                                                        </co-input-group>

Input group - Suffix


                                                        
                                                        
                                                            <co-input-group label="Label">
                                                            <span slot="suffix">%</span>
                                                        </co-input-group>

Input group - Prefix & Suffix


                                                        
                                                        
                                                            <co-input-group label="Label">
                                                            <span slot="prefix">£</span>
                                                            <span slot="suffix">%</span>
                                                        </co-input-group>

Input group - Using slots


                                                        
                                                        
                                                            <co-input-group optional invalid label-size="lg">
                                                            <label slot="label">Label</label>
                                                            <p slot="helper-text">Helper slotstext</p>
                                                            <p slot="validity-msg">This field is required</p>
                                                            <span slot="prefix">£</span>
                                                            <span slot="suffix">%</span>
                                                        </co-input-group>

Input group - Using attributes


                                                        
                                                        
                                                            <co-input-group label="Label" optional invalid label-size="lg" validity-msg="This field is required" optional helper-text="Helper Text">
                                                            <span slot="prefix">£</span>
                                                            <span slot="suffix">%</span>
                                                        </co-input-group>

Properties

Property	Type	Description	Usage
label	String	The input group’s label, to describe the purpose of the input group.	label=”Label Name”
label-size	String	The input group’s label size	label-size= ”md” \| “lg” \| “xl” \| “2xl” \| "3xl" \| "4xl" \| "5xl" \| "6xl" \| "7xl" \| "8xl"
optional	Boolean	To display the optional text	optional= true \| false
helper-text	String	The input group helper text, that describes how to use the helper text.	helper-text= ”This is helper text”
validity-msg	String	The input group validation message	validity-msg= ”This field is required”
invalid	Boolean	Controls the invalid state and visibility of the validity message	invalid= true \| false
disabled	Boolean	Controls the disable state of the input group	disabled= true \| false
required	Boolean	To make the input group as required field	required= true \| false
readonly	Boolean	To make the input group as readonly	readonly= true \| false
min	Number	To specify the minimum value for an input group.	min=”1”
max	Number	To specify the maximum value for an input group	max=”100”
value	String	The value of the input group	value=”John”

Slots

Developer can use either attributes mentioned in property table or use slots like below.

Name	Description	Usage
label	Label for the input group.	slot=”label”
helper-text	Helper text for the Input group.	<p slot="helper-text”>This is slider helper text</p>
validity-msg	Validation message for the input group	<p slot="validity-msg”>This field is required</p>

Dependencies

This component automatically imports the following dependency.


                                                        
                                                        
                                                            <co-icon></co-icon>