components
Input
v.1.0.0 | SaturnUsage
The name of the object of tokens to style the input component is INPUT_STYLES.
You can not change the name of the object of tokens.
Input component has one way to modify the styles:
- Variant: modify the styles of the Input.
The structure of the INPUT_STYLES object is:
Variants and States
Variants can modify the styles for each inner state of the input. The inner states are:
12345678910
enum InputState { EMPTY ACTIVE FILLED ERROR_EMPTY ERROR_FILLED ERROR_FILLED_WITH_INFO ERROR_ACTIVE DISABLED_FILLED DISABLED_EMPTY
For each inner state the next tokens can be used:
- inputWrapperContainer?: CommonStyleType;
- topContentContainer?: CommonStyleType;
- input?: TypographyTypes;
- inputContainer?: CommonStyleType;
- inputIcon?: IconTypes;
- inputIconContainer?: CommonStyleType;
- inputIconContainerRight?: CommonStyleType;
- label?: TypographyTypes & { type?: LABEL_TYPE; };
- labelContainer?: CommonStyleType;
- placeholder?: TypographyTypes;
- asterisk?: TypographyTypes;
- loader?: TypographyTypes;
- loaderContainer?: CommonStyleType;
- loaderIcon?: IconTypes;
- loaderVariant?: string;
- title?: TypographyTypes;
- titleContainer?: CommonStyleType;
- informationAssociated?: TypographyTypes;
- informationAssociatedTextAndDecorativeContainer?: CommonStyleType;
- informationAssociatedContainer?: CommonStyleType;
- informationAssociatedIcon?: IconTypes;
- informationAssociatedIconHightlight?: { variant: string; color: string; size: IconHighlightedSizeType; backgroundColor?: string; };
- informationAssociatedIconHightlightContainer?: CommonStyleType;
- informationAssociatedButton?: { variant: string; size: string; };
- informationAssociatedButtonContainer?: CommonStyleType;
- errorMessage?: TypographyTypes;
- errorMessageContainer?: CommonStyleType;
- errorMessageIcon?: IconTypes;
- errorMessageIconContainer?: CommonStyleType;
- helpMessage?: TypographyTypes & { position?: InputHelpMessagePosition; };
- helpMessageContainer?: CommonStyleType;
- inputCaretColor?: { [key in DeviceBreakpointsType]?: string };
12345678910
const INPUT_STYLES = { [VARIANT]: { [STATE]: { inputWrapperContainer?: CommonStyleType; topContentContainer?: CommonStyleType; input?: TypographyTypes; inputContainer?: CommonStyleType; inputIcon?: IconTypes; inputIconContainer?: CommonStyleType; inputIconContainerRight?: CommonStyleType;
Types
- LABEL_TYPE
12345
enum LABEL_TYPE { STANDARD = 'STANDARD', OUTLINED = 'OUTLINED', FILLED = 'FILLED', }
- InputContentPosition
1234
enum InputContentPosition { INNER = 'INNER', OUT = 'OUT', }
Example
input theme object example:
12345678910
const INPUT_STYLES = { [VARIANT]: { [STATE]: { inputWrapperContainer: { background_color: 'color', border_color: 'color', } inputIcon: { width: 'width', height: 'height',