Appearance

Input

DesignA11yAPIExampleChangelog

Password input ​

Button with the ShowYes button enables the password display. ShowNo hides the password and shows bullets, respectively.

tsx
import React from 'react';
import Input from 'intergalactic/input';
import ShowYesM from 'intergalactic/icon/ShowYes/m';
import ShowNoM from 'intergalactic/icon/ShowNo/m';
import Button from 'intergalactic/button';
import { Text } from 'intergalactic/typography';
import { Box } from 'intergalactic/flex-box';
import { Hint } from 'intergalactic/tooltip';

const Demo = () => {
  const [type, setType] = React.useState('password');

  return (
    <>
      <Text tag='label' htmlFor='password-example' size={200}>
        Your password
      </Text>
      <Box mt={2}>
        <Input w={240}>
          <Input.Value
            defaultValue='I_like_cats'
            placeholder='Password'
            type={type}
            id='password-example'
          />
          <Hint
            title={type === 'password' ? 'Show password' : 'Hide password'}
            aria-label={undefined}
          >
            <Input.Addon
              aria-label={type === 'password' ? 'Show password' : 'Hide password'}
              mr='-1px'
              tag={Button}
              onClick={() => setType((type) => (type === 'password' ? 'text' : 'password'))}
            >
              {type === 'password' ? <ShowYesM /> : <ShowNoM />}
            </Input.Addon>
          </Hint>
        </Input>
      </Box>
    </>
  );
};

export default Demo;
import React from 'react';
import Input from 'intergalactic/input';
import ShowYesM from 'intergalactic/icon/ShowYes/m';
import ShowNoM from 'intergalactic/icon/ShowNo/m';
import Button from 'intergalactic/button';
import { Text } from 'intergalactic/typography';
import { Box } from 'intergalactic/flex-box';
import { Hint } from 'intergalactic/tooltip';

const Demo = () => {
  const [type, setType] = React.useState('password');

  return (
    <>
      <Text tag='label' htmlFor='password-example' size={200}>
        Your password
      </Text>
      <Box mt={2}>
        <Input w={240}>
          <Input.Value
            defaultValue='I_like_cats'
            placeholder='Password'
            type={type}
            id='password-example'
          />
          <Hint
            title={type === 'password' ? 'Show password' : 'Hide password'}
            aria-label={undefined}
          >
            <Input.Addon
              aria-label={type === 'password' ? 'Show password' : 'Hide password'}
              mr='-1px'
              tag={Button}
              onClick={() => setType((type) => (type === 'password' ? 'text' : 'password'))}
            >
              {type === 'password' ? <ShowYesM /> : <ShowNoM />}
            </Input.Addon>
          </Hint>
        </Input>
      </Box>
    </>
  );
};

export default Demo;

Loading state ​

If the input is in a loading state while searching, sending, or entering data dynamically, add our Spin to the right addon.

tsx
import React from 'react';
import Input from 'intergalactic/input';
import Spin from 'intergalactic/spin';
import { Text } from 'intergalactic/typography';
import { Box } from 'intergalactic/flex-box';

const Demo = () => {
  const [value, setValue] = React.useState('');
  const [loading, setLoading] = React.useState(false);

  React.useEffect(() => {
    const timer = setTimeout(() => setLoading(false), 1000);
    return () => clearTimeout(timer);
  }, [value]);

  function handlerInput(v) {
    setLoading(true);
    setValue(v);
  }

  return (
    <>
      <Text tag='label' htmlFor='loading-example' size={200}>
        Input with loading state
      </Text>
      <Box mt={2}>
        <Input w={300}>
          <Input.Value
            id='loading-example'
            placeholder='Type something to see world spinning...'
            value={value}
            onChange={handlerInput}
          />
          {loading && (
            <Input.Addon>
              <Spin size='xs' />
            </Input.Addon>
          )}
        </Input>
      </Box>
    </>
  );
};

export default Demo;
import React from 'react';
import Input from 'intergalactic/input';
import Spin from 'intergalactic/spin';
import { Text } from 'intergalactic/typography';
import { Box } from 'intergalactic/flex-box';

const Demo = () => {
  const [value, setValue] = React.useState('');
  const [loading, setLoading] = React.useState(false);

  React.useEffect(() => {
    const timer = setTimeout(() => setLoading(false), 1000);
    return () => clearTimeout(timer);
  }, [value]);

  function handlerInput(v) {
    setLoading(true);
    setValue(v);
  }

  return (
    <>
      <Text tag='label' htmlFor='loading-example' size={200}>
        Input with loading state
      </Text>
      <Box mt={2}>
        <Input w={300}>
          <Input.Value
            id='loading-example'
            placeholder='Type something to see world spinning...'
            value={value}
            onChange={handlerInput}
          />
          {loading && (
            <Input.Addon>
              <Spin size='xs' />
            </Input.Addon>
          )}
        </Input>
      </Box>
    </>
  );
};

export default Demo;

Input with clearing ability ​

The input field may have a clickable Close icon inside it to clear the entered value. This icon is only visible when there is some typed text or values in the input field, regardless of its status.

tsx
import React from 'react';
import Input from 'intergalactic/input';
import CloseM from 'intergalactic/icon/Close/m';
import { Text } from 'intergalactic/typography';
import { Box } from 'intergalactic/flex-box';
import { Hint } from 'intergalactic/tooltip';

const Demo = () => {
  const [value, setValue] = React.useState('');

  return (
    <>
      <Text tag='label' htmlFor='clear-example' size={200}>
        Clearable input
      </Text>
      <Box mt={2}>
        <Input w={320}>
          <Input.Value
            placeholder='Type something to clear something'
            value={value}
            onChange={(v) => setValue(v)}
            id='clear-example'
          />
          {value && (
            <Input.Addon>
              <Hint
                interactive
                title='Clear'
                tag={CloseM}
                onClick={() => setValue('')}
                color='icon-secondary-neutral'
              />
            </Input.Addon>
          )}
        </Input>
      </Box>
    </>
  );
};

export default Demo;
import React from 'react';
import Input from 'intergalactic/input';
import CloseM from 'intergalactic/icon/Close/m';
import { Text } from 'intergalactic/typography';
import { Box } from 'intergalactic/flex-box';
import { Hint } from 'intergalactic/tooltip';

const Demo = () => {
  const [value, setValue] = React.useState('');

  return (
    <>
      <Text tag='label' htmlFor='clear-example' size={200}>
        Clearable input
      </Text>
      <Box mt={2}>
        <Input w={320}>
          <Input.Value
            placeholder='Type something to clear something'
            value={value}
            onChange={(v) => setValue(v)}
            id='clear-example'
          />
          {value && (
            <Input.Addon>
              <Hint
                interactive
                title='Clear'
                tag={CloseM}
                onClick={() => setValue('')}
                color='icon-secondary-neutral'
              />
            </Input.Addon>
          )}
        </Input>
      </Box>
    </>
  );
};

export default Demo;

Input with submit button inside ​

You can place submit button inside the input as the right addon. It is only visible when the input has focused state.

tsx
import React from 'react';
import Input from 'intergalactic/input';
import CheckM from 'intergalactic/icon/Check/m';
import { Text } from 'intergalactic/typography';
import { Box } from 'intergalactic/flex-box';
import { Hint } from 'intergalactic/tooltip';

const Demo = () => {
  const [focus, setFocus] = React.useState(false);

  return (
    <>
      <Text tag='label' htmlFor='submit-example' size={200}>
        Input with submit button
      </Text>
      <Box mt={2}>
        <Input w={320}>
          <Input.Value
            placeholder='Write something'
            onBlur={() => setFocus(false)}
            onFocus={() => setFocus(true)}
            id='submit-example'
          />
          {focus && (
            <Input.Addon>
              <Hint interactive title='Submit' tag={CheckM} color='icon-secondary-success' />
            </Input.Addon>
          )}
        </Input>
      </Box>
    </>
  );
};

export default Demo;
import React from 'react';
import Input from 'intergalactic/input';
import CheckM from 'intergalactic/icon/Check/m';
import { Text } from 'intergalactic/typography';
import { Box } from 'intergalactic/flex-box';
import { Hint } from 'intergalactic/tooltip';

const Demo = () => {
  const [focus, setFocus] = React.useState(false);

  return (
    <>
      <Text tag='label' htmlFor='submit-example' size={200}>
        Input with submit button
      </Text>
      <Box mt={2}>
        <Input w={320}>
          <Input.Value
            placeholder='Write something'
            onBlur={() => setFocus(false)}
            onFocus={() => setFocus(true)}
            id='submit-example'
          />
          {focus && (
            <Input.Addon>
              <Hint interactive title='Submit' tag={CheckM} color='icon-secondary-success' />
            </Input.Addon>
          )}
        </Input>
      </Box>
    </>
  );
};

export default Demo;

Input with text addon ​

You can add text to the input as an addon that the user cannot modify. This can be useful when you need a fixed placeholder text in the input.

tsx
import React from 'react';
import Input from 'intergalactic/input';
import { Text } from 'intergalactic/typography';
import { Box } from 'intergalactic/flex-box';

const Demo = () => {
  return (
    <>
      <Text size={300}>Input with permanent text</Text>
      <Box mt={2} mb={4}>
        <Input size='l' w={300}>
          <Input.Addon pr='3px'>
            <Text color='text-secondary' tag='label' htmlFor='permanent-placeholder-l-example'>
              Permanent text:
            </Text>
          </Input.Addon>
          <Input.Value placeholder='Placeholder' id='permanent-placeholder-l-example' />
        </Input>
      </Box>
      <Text size={200}>Input with permanent text</Text>
      <Box mt={2}>
        <Input size='m' w={300}>
          <Input.Addon pr='2px'>
            <Text color='text-secondary' tag='label' htmlFor='permanent-placeholder-m-example'>
              Permanent text:
            </Text>
          </Input.Addon>
          <Input.Value placeholder='Placeholder' id='permanent-placeholder-m-example' />
        </Input>
      </Box>
    </>
  );
};

export default Demo;
import React from 'react';
import Input from 'intergalactic/input';
import { Text } from 'intergalactic/typography';
import { Box } from 'intergalactic/flex-box';

const Demo = () => {
  return (
    <>
      <Text size={300}>Input with permanent text</Text>
      <Box mt={2} mb={4}>
        <Input size='l' w={300}>
          <Input.Addon pr='3px'>
            <Text color='text-secondary' tag='label' htmlFor='permanent-placeholder-l-example'>
              Permanent text:
            </Text>
          </Input.Addon>
          <Input.Value placeholder='Placeholder' id='permanent-placeholder-l-example' />
        </Input>
      </Box>
      <Text size={200}>Input with permanent text</Text>
      <Box mt={2}>
        <Input size='m' w={300}>
          <Input.Addon pr='2px'>
            <Text color='text-secondary' tag='label' htmlFor='permanent-placeholder-m-example'>
              Permanent text:
            </Text>
          </Input.Addon>
          <Input.Value placeholder='Placeholder' id='permanent-placeholder-m-example' />
        </Input>
      </Box>
    </>
  );
};

export default Demo;

Input with multiple addons ​

When stacking two addons, the indents of the adjacent addons should be divided in half. This ensures that there is enough space around them for normal interaction.

tsx
import React from 'react';
import Input from 'intergalactic/input';
import Link from 'intergalactic/link';
import CloseM from 'intergalactic/icon/Close/m';
import ShowYesM from 'intergalactic/icon/ShowYes/m';
import ShowNoM from 'intergalactic/icon/ShowNo/m';
import { Text } from 'intergalactic/typography';
import { Box } from 'intergalactic/flex-box';
import Button from 'intergalactic/button';
import { Hint } from 'intergalactic/tooltip';

const Demo = () => {
  const [value, setValue] = React.useState('');
  const [type, setType] = React.useState('password');

  return (
    <>
      <Text tag='label' htmlFor='2addon-example' size={200}>
        Your password
      </Text>
      <Box mt={2}>
        <Input w={320}>
          <Input.Value
            defaultValue='I_like_cats'
            type={type}
            value={value}
            onChange={(v) => setValue(v)}
            id='2addon-example'
          />
          {value && (
            <Input.Addon pl={2} pr={1}>
              <Hint tag={CloseM} interactive title='Clear' onClick={() => setValue('')} />
            </Input.Addon>
          )}
          <Input.Addon px={2}>
            <Link>Forgot?</Link>
          </Input.Addon>
          <Hint
            title={type === 'password' ? 'Show password' : 'Hide password'}
            aria-label={undefined}
          >
            <Input.Addon
              aria-label={type === 'password' ? 'Show password' : 'Hide password'}
              mr='-1px'
              tag={Button}
              onClick={() => setType((type) => (type === 'password' ? 'text' : 'password'))}
            >
              {type === 'password' ? <ShowYesM /> : <ShowNoM />}
            </Input.Addon>
          </Hint>
        </Input>
      </Box>
    </>
  );
};

export default Demo;
import React from 'react';
import Input from 'intergalactic/input';
import Link from 'intergalactic/link';
import CloseM from 'intergalactic/icon/Close/m';
import ShowYesM from 'intergalactic/icon/ShowYes/m';
import ShowNoM from 'intergalactic/icon/ShowNo/m';
import { Text } from 'intergalactic/typography';
import { Box } from 'intergalactic/flex-box';
import Button from 'intergalactic/button';
import { Hint } from 'intergalactic/tooltip';

const Demo = () => {
  const [value, setValue] = React.useState('');
  const [type, setType] = React.useState('password');

  return (
    <>
      <Text tag='label' htmlFor='2addon-example' size={200}>
        Your password
      </Text>
      <Box mt={2}>
        <Input w={320}>
          <Input.Value
            defaultValue='I_like_cats'
            type={type}
            value={value}
            onChange={(v) => setValue(v)}
            id='2addon-example'
          />
          {value && (
            <Input.Addon pl={2} pr={1}>
              <Hint tag={CloseM} interactive title='Clear' onClick={() => setValue('')} />
            </Input.Addon>
          )}
          <Input.Addon px={2}>
            <Link>Forgot?</Link>
          </Input.Addon>
          <Hint
            title={type === 'password' ? 'Show password' : 'Hide password'}
            aria-label={undefined}
          >
            <Input.Addon
              aria-label={type === 'password' ? 'Show password' : 'Hide password'}
              mr='-1px'
              tag={Button}
              onClick={() => setType((type) => (type === 'password' ? 'text' : 'password'))}
            >
              {type === 'password' ? <ShowYesM /> : <ShowNoM />}
            </Input.Addon>
          </Hint>
        </Input>
      </Box>
    </>
  );
};

export default Demo;

Input with other component inside ​

You can also place a Badge or a Tag inside the input.

tsx
import React from 'react';
import Input from 'intergalactic/input';
import Badge from 'intergalactic/badge';
import Tag from 'intergalactic/tag';
import { Text } from 'intergalactic/typography';
import { Box } from 'intergalactic/flex-box';

const Demo = () => {
  const [value, setValue] = React.useState('heh');

  return (
    <div>
      <Text tag='label' htmlFor='count-example' size={200}>
        Input with symbols counter
      </Text>
      <Box mt={2} mb={4}>
        <Input w={320}>
          <Input.Value
            placeholder='Count some words right here'
            value={value}
            onChange={(v) => setValue(v)}
            maxLength={10}
            id='count-example'
            aria-describedby='chars-counter'
          />
          <Input.Addon>
            <Tag size='m' id='chars-counter'>
              {value.length}/10
            </Tag>
          </Input.Addon>
        </Input>
      </Box>
      <Text tag='label' htmlFor='badge-example' size={200}>
        Input with badge
      </Text>
      <Box mt={2}>
        <Input w={320}>
          <Input.Value placeholder='Wow! Such input. So new.' id='badge-example' />
          <Input.Addon>
            <Badge bg='green-300'>new</Badge>
          </Input.Addon>
        </Input>
      </Box>
    </div>
  );
};

export default Demo;
import React from 'react';
import Input from 'intergalactic/input';
import Badge from 'intergalactic/badge';
import Tag from 'intergalactic/tag';
import { Text } from 'intergalactic/typography';
import { Box } from 'intergalactic/flex-box';

const Demo = () => {
  const [value, setValue] = React.useState('heh');

  return (
    <div>
      <Text tag='label' htmlFor='count-example' size={200}>
        Input with symbols counter
      </Text>
      <Box mt={2} mb={4}>
        <Input w={320}>
          <Input.Value
            placeholder='Count some words right here'
            value={value}
            onChange={(v) => setValue(v)}
            maxLength={10}
            id='count-example'
            aria-describedby='chars-counter'
          />
          <Input.Addon>
            <Tag size='m' id='chars-counter'>
              {value.length}/10
            </Tag>
          </Input.Addon>
        </Input>
      </Box>
      <Text tag='label' htmlFor='badge-example' size={200}>
        Input with badge
      </Text>
      <Box mt={2}>
        <Input w={320}>
          <Input.Value placeholder='Wow! Such input. So new.' id='badge-example' />
          <Input.Addon>
            <Badge bg='green-300'>new</Badge>
          </Input.Addon>
        </Input>
      </Box>
    </div>
  );
};

export default Demo;

Released under the MIT License.

Copyright © 2023-present Powered by Semrush. All rights reserved.

Released under the MIT License.

Copyright © 2023-present Powered by Semrush. All rights reserved.