components
Input
v.1.0.0 | Saturn
StorybookField that enables a user to interact and input data. It is used to enter non-standardized responses
<Input variant="DEFAULT" />This component is typically used when the data entered by the user is generic or textual. For more specific data entry, such as password, phone numbers or searchers, you may want to explore other components from the forms category.
Variant
In Kubit Design System, users have the freedom to generate variants for each component according to their needs. While predefined variants are provided as examples, they can be modified or new ones can be added to align with the specific requirements of each project.
We have set this predefined style for quick use. Access them through the variant prop:
<Input variant="DEFAULT" label={{ content: 'Label' }} placeholder="Placeholder" />Error
If ERROR is TRUE the component will communicate that something is not right. The type of error and the form of solving should be communicate through the errorMessage component. Also, a errorIcon can be set for further visual alert.
<Input
variant="DEFAULT"
error={true}
errorMessage={{ content: 'Error message' }}
errorIcon={{ icon: 'ICON_ALERT', altText: 'Alt text error' }}
errorAriaLiveType="polite"
label={{ content: 'Label' }}
value="Value"
/>Disabled
If DISABLED is TRUE it means that is a non interactive component.
<Input variant="DEFAULT" label={{ content: 'Label' }} placeholder="Placeholder" disabled={true} />Icon
A rightIcon and/or leftIcon can be added for decorative purposes.
<Input
variant="DEFAULT"
label={{ content: 'Label' }}
placeholder="Placeholder"
helpMessage={{ content: 'Help message' }}
rightIcon={{ icon: 'ICON_PENCIL' }}
iconPosition="RIGHT"
/>Required
For the required prop is also need to select the requiredSymbol for visually communicate the mandatory selection to the user. The predefined symbol is an asterisk.
<Input
variant="DEFAULT"
label={{ content: 'Label', requiredSymbol: '*' }}
placeholder="Placeholder"
required="true"
helpMessage={{ content: 'Help message' }}
rightIcon={{ icon: 'ICON_PENCIL' }}
iconPosition="RIGHT"
/>Loading
In order to use the loading state, set the loading and loader props.
loading is a boolean that indicates if the component is in a loading state. loader is a ILoader object that allows to provide a description of the loading state to assistive technologies.
<Input
variant="DEFAULT"
label={{ content: 'Label' }}
placeholder="Placeholder"
loading={true}
loader={{"aria-label": "Loading"}}
/>InputStructure
This is not a prop of inputBasic but rather a distinct input component.
In addition to the component, Kubit offered inputStructure as basic framework for initial structure for an input but does not have intrinsic functionality. Its main purpose is to provide the skeleton upon which programmers can build and customize inputs according to the specific needs of their projects.
Basic use
While the immediate use of the component only requires centerContent , additional elements, such as other components or strings, can be incorporated using leftContent, rightContent, topContent and bottomContent.
<InputStructure variant="DEFAULT" centerContent={<Input variant="DEFAULT" label={{ content: 'Label' }} placeholder="Placeholder" />} />