Password input

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

import React from 'react';
import Input from '@semcore/input';
import ShowYesM from '@semcore/icon/ShowYes/m';
import ShowNoM from '@semcore/icon/ShowNo/m';
import { ButtonLink } from '@semcore/button';
import { Text } from '@semcore/typography';
import { Flex } from '@semcore/flex-box';
import { Hint } from '@semcore/tooltip';

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

  return (
    <Flex direction='column' gap={2}>
      <Text tag='label' htmlFor='password-example' size={200}>
        Your password
      </Text>
      <Input w={240}>
        <Input.Value
          defaultValue='I_like_cats'
          placeholder='Password'
          type={type}
          autoComplete='current-password'
          id='password-example'
        />
        <Input.Addon>
          <Hint
            title={type === 'password' ? 'Show password' : 'Hide password'}
            tag={ButtonLink}
            use='secondary'
            addonLeft={type === 'password' ? ShowYesM : ShowNoM}
            onClick={() => setType((type) => (type === 'password' ? 'text' : 'password'))}
          />
        </Input.Addon>
      </Input>
    </Flex>
  );
};

export default Demo;

Loading state

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

import React from 'react';
import Input from '@semcore/input';
import Spin from '@semcore/spin';
import { Text } from '@semcore/typography';
import { Box, ScreenReaderOnly } from '@semcore/flex-box';

const Demo = () => {
  const [value, setValue] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const [loadingStatus, setLoadingStatus] = React.useState<React.ReactNode | null>(null);

  React.useEffect(() => {
    const timer = setTimeout(() => {
      setLoadingStatus(<ScreenReaderOnly>Loaded</ScreenReaderOnly>);
      setLoading(false);
    }, 2000);
    return () => clearTimeout(timer);
  }, [value]);

  React.useEffect(() => {
    if (loading) {
      setLoadingStatus(<Spin size='xs' />);
    } else {
      const timer = setTimeout(() => {
        setLoadingStatus(null);
      }, 300);
      return () => clearTimeout(timer);
    }
  }, [loading]);

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

  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 start loading'
            value={value}
            onChange={handlerInput}
          />
          <Input.Addon role='status' aria-live='polite'>
            {loadingStatus}
          </Input.Addon>
        </Input>
      </Box>
    </>
  );
};

export default Demo;

Input with clear button

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

import React from 'react';
import Input from '@semcore/input';
import { ButtonLink } from '@semcore/button';
import CloseM from '@semcore/icon/Close/m';
import { Text } from '@semcore/typography';
import { Flex } from '@semcore/flex-box';

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

  return (
    <Flex direction='column' gap={2}>
      <Text tag='label' htmlFor='clear-example' size={200}>
        Clearable input
      </Text>
      <Input w={320}>
        <Input.Value
          placeholder='Type something to clear something'
          value={value}
          onChange={(v) => setValue(v)}
          id='clear-example'
        />
        {value && (
          <Input.Addon>
            <ButtonLink
              use='secondary'
              addonLeft={CloseM}
              title='Clear'
              onClick={() => setValue('')}
            />
          </Input.Addon>
        )}
      </Input>
    </Flex>
  );
};

export default Demo;

Input with submit button

You can place a submit button inside the input as the right addon. It's only visible when the input has a nonempty value.

import React from 'react';
import Input from '@semcore/input';
import { ButtonLink } from '@semcore/button';
import CheckM from '@semcore/icon/Check/m';
import { Text } from '@semcore/typography';
import { Flex } from '@semcore/flex-box';
import { Hint } from '@semcore/tooltip';

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

  return (
    <Flex direction='column' gap={2}>
      <Text tag='label' htmlFor='submit-example' size={200}>
        Input with submit button
      </Text>
      <Input w={320}>
        <Input.Value
          placeholder='Write something'
          value={value}
          onChange={setValue}
          id='submit-example'
        />
        {value && (
          <Input.Addon>
            <Hint
              tag={ButtonLink}
              addonLeft={CheckM}
              color='icon-secondary-success'
              title='Submit'
              onClick={() => setValue('')}
            />
          </Input.Addon>
        )}
      </Input>
    </Flex>
  );
};

export default Demo;

Input with text addon

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

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

const Demo = () => {
  return (
    <>
      <Text size={300} id='label-l' tag='label' htmlFor='permanent-placeholder-l-example'>
        Input with permanent text, size L
      </Text>
      <Box mt={2} mb={4}>
        <Input size='l' w={300}>
          <Input.Addon pr={1}>
            <Text color='text-secondary' id='prefix-l'>
              Permanent text:
            </Text>
          </Input.Addon>
          <Input.Value
            placeholder='Placeholder'
            aria-labelledby='label-l prefix-l'
            id='permanent-placeholder-l-example'
          />
        </Input>
      </Box>
      <Text size={200} id='label-m' tag='label' htmlFor='permanent-placeholder-m-example'>
        Input with permanent text, size M
      </Text>
      <Box mt={2}>
        <Input size='m' w={300}>
          <Input.Addon pr={1}>
            <Text color='text-secondary' id='prefix-m'>
              Permanent text:
            </Text>
          </Input.Addon>
          <Input.Value
            placeholder='Placeholder'
            aria-labelledby='label-m prefix-m'
            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.

import React from 'react';
import Input from '@semcore/input';
import Link from '@semcore/link';
import CloseM from '@semcore/icon/Close/m';
import ShowYesM from '@semcore/icon/ShowYes/m';
import ShowNoM from '@semcore/icon/ShowNo/m';
import { Text } from '@semcore/typography';
import { Box } from '@semcore/flex-box';
import { ButtonLink } from '@semcore/button';
import { Hint } from '@semcore/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}
            autoComplete='current-password'
            value={value}
            onChange={(v) => setValue(v)}
            id='2addon-example'
          />
          {value && (
            <Input.Addon pl={2} pr={1}>
              <Hint
                tag={ButtonLink}
                addonLeft={CloseM}
                use='secondary'
                title='Clear'
                onClick={() => setValue('')}
              />
            </Input.Addon>
          )}
          <Input.Addon px={2}>
            <Link>Forgot?</Link>
          </Input.Addon>
          <Input.Addon>
            <Hint
              title={type === 'password' ? 'Show password' : 'Hide password'}
              tag={ButtonLink}
              use='secondary'
              addonLeft={type === 'password' ? ShowYesM : ShowNoM}
              onClick={() => setType((type) => (type === 'password' ? 'text' : 'password'))}
            />
          </Input.Addon>
        </Input>
      </Box>
    </>
  );
};

export default Demo;

Input with other components

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

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

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

  return (
    <div>
      <Text tag='label' htmlFor='count-example' size={200}>
        Input with character counter
      </Text>
      <Box mt={2} mb={4}>
        <Input w={320}>
          <Input.Value
            placeholder='Count some characters 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'
            aria-describedby='badge-new'
          />
          <Input.Addon>
            <Badge bg='green-300' id='badge-new'>
              new
            </Badge>
          </Input.Addon>
        </Input>
      </Box>
    </div>
  );
};

export default Demo;