Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Input Counter

v.1.0.0 | Saturn

Usage

The name of the object of tokens to style the inputCounter component is INPUT_COUNTER_STYLES.

You can not change the name of the object of tokens.

inputCounter component has one way to modify the styles:

  • Variant: modify the styles of the InputCounter.

The structure of the INPUT_COUNTER_STYLES object is:

Variants and States

Variants can modify the styles for each inner state of the inputCounter. The states are: InputState;

For each inner state the next tokens can be used:

  • InputBasicStateProps;
  • inputVariant?: string; (It should go a valid variant from the Input component)
  • textCountVariant?: string;
  • textCountLeftWeight?: number;
  • textCountLeftColor?: string;
  • textCountRightWeight?: number;
  • textCountRightColor?: string;
  • textCounterContainer?: CommonStyleType;
12345678910
const INPUT_COUNTER_STYLES = {
  [VARIANT]: {
    [STATE]: InputBasicStateProps & {
      inputVariant?: string;
      textCountVariant?: string;
      textCountLeftWeight?: number;
      textCountLeftColor?: string;
      textCountRightWeight?: number;
      textCountRightColor?: string;
      textCounterContainer?: CommonStyleType;

Example

inputCounter theme object example:

12345678910
const INPUT_COUNTER_STYLES = {
  [VARIANT]: {
    [STATE]: {
      textCounterContainer: {
        margin_right: 'margin',
      },
      inputVariant: 'variant',
      textCountTextVariant: 'variant',
      textCountRightColor: 'color',
      textCountRightWeight: 'weight',
Input CounterCode API
Input CounterAccessibility