Input

The Input component is used to get user input in a text field.

Import

copy
import { Input } from '@trendmicro/react-styled-ui';
import { Input } from '@trendmicro/react-styled-ui';

Usage

EDITABLE EXAMPLE
copy
<>
  <TextLabel mb="1x">Label:</TextLabel>
  <Input placeholder="Basic example" />
  <Text size="xs" mt="1x">Help text for the text input</Text>
</>
<>
  <TextLabel mb="1x">Label:</TextLabel>
  <Input placeholder="Basic example" />
  <Text size="xs" mt="1x">Help text for the text input</Text>
</>

Sizes

Use the size prop to change the size of the Input. You can set the value to sm, md, or lg.

EDITABLE EXAMPLE
copy
<Stack direction="column" spacing="4x">
  <Box>
    <TextLabel mb="1x" size="sm">Label:</TextLabel>
    <Input size="sm" placeholder="Small size (24px)" />
  </Box>
  <Box>
    <TextLabel mb="1x" size="md">Label:</TextLabel>
    <Input size="md" placeholder="Default size (32px)" />
  </Box>
  <Box>
    <TextLabel mb="1x" size="lg">Label:</TextLabel>
    <Input size="lg" placeholder="Large size (40px)" />
  </Box>
</Stack>
<Stack direction="column" spacing="4x">
  <Box>
    <TextLabel mb="1x" size="sm">Label:</TextLabel>
    <Input size="sm" placeholder="Small size (24px)" />
  </Box>
  <Box>
    <TextLabel mb="1x" size="md">Label:</TextLabel>
    <Input size="md" placeholder="Default size (32px)" />
  </Box>
  <Box>
    <TextLabel mb="1x" size="lg">Label:</TextLabel>
    <Input size="lg" placeholder="Large size (40px)" />
  </Box>
</Stack>

Variants

The Input component comes in 3 variants: outline, filled, and unstyled. Pass the variant prop and set it to either of these values.

outline

EDITABLE EXAMPLE
copy
<Input variant="outline" placeholder="John Doe" />
<Input variant="outline" placeholder="John Doe" />

filled

EDITABLE EXAMPLE
copy
<Input variant="filled" placeholder="John Doe" />
<Input variant="filled" placeholder="John Doe" />

unstyled

EDITABLE EXAMPLE
copy
<Input variant="unstyled" placeholder="John Doe" />
<Input variant="unstyled" placeholder="John Doe" />

Attributes

Standard input attributes are supported, e.g., type, disabled, readOnly, required, list, etc.

type

EDITABLE EXAMPLE
copy
<Grid
  templateColumns="min-content auto"
  columnGap="3x"
  rowGap="3x"
>
  <Grid>
    <TextLabel>Name:</TextLabel>
  </Grid>
  <Grid>
    <Input type="text" placeholder="John Doe" />
  </Grid>
  <Grid>
    <TextLabel>Password:</TextLabel>
  </Grid>
  <Grid>
    <Input type="password" placeholder="Password" />
  </Grid>
</Grid>
<Grid
  templateColumns="min-content auto"
  columnGap="3x"
  rowGap="3x"
>
  <Grid>
    <TextLabel>Name:</TextLabel>
  </Grid>
  <Grid>
    <Input type="text" placeholder="John Doe" />
  </Grid>
  <Grid>
    <TextLabel>Password:</TextLabel>
  </Grid>
  <Grid>
    <Input type="password" placeholder="Password" />
  </Grid>
</Grid>

disabled

EDITABLE EXAMPLE
copy
<Stack directin="column" spacing="4x">
  <Input disabled placeholder="Placeholder text" />
  <Input disabled placeholder="Placeholder text" defaultValue="Disabled" />
</Stack>
<Stack directin="column" spacing="4x">
  <Input disabled placeholder="Placeholder text" />
  <Input disabled placeholder="Placeholder text" defaultValue="Disabled" />
</Stack>

readOnly

EDITABLE EXAMPLE
copy
<Stack directin="column" spacing="4x">
  <Input readOnly placeholder="Placeholder text" />
  <Input readOnly placeholder="Placeholder text" defaultValue="Read-only" />
</Stack>
<Stack directin="column" spacing="4x">
  <Input readOnly placeholder="Placeholder text" />
  <Input readOnly placeholder="Placeholder text" defaultValue="Read-only" />
</Stack>

required

EDITABLE EXAMPLE
copy
<Input required placeholder="Placeholder text" />
<Input required placeholder="Placeholder text" />

list

The value of list is the id attribute of the <datalist> of autocomplete options. The HTML <datalist> element contains a set of <option> elements that represent the permissible or recommended options available to choose from within other controls.

EDITABLE EXAMPLE
copy
<>
  <Flex align="center">
    <TextLabel htmlFor="browser-choice" mr="2x">
      Choose a browser from the list:
    </TextLabel>
    <Input list="browsers" id="browser-choice" width="auto" />
  </Flex>
  <Box as="datalist" id="browsers">
    <option value="Chrome" />
    <option value="Firefox" />
    <option value="Internet Explorer" />
    <option value="Opera" />
    <option value="Safari" />
    <option value="Microsoft Edge" />
  </Box>
</>
<>
  <Flex align="center">
    <TextLabel htmlFor="browser-choice" mr="2x">
      Choose a browser from the list:
    </TextLabel>
    <Input list="browsers" id="browser-choice" width="auto" />
  </Flex>
  <Box as="datalist" id="browsers">
    <option value="Chrome" />
    <option value="Firefox" />
    <option value="Internet Explorer" />
    <option value="Opera" />
    <option value="Safari" />
    <option value="Microsoft Edge" />
  </Box>
</>

Adornments

Input adornments can be used to add a prefix, a suffix or an action to an input. For instance, you can use an icon button to hide or reveal the password.

First, you may have to create your input adornment components for convenience. Note that you must use the z-index value as mentioned below.

copy
const InputAdornmentPrepend = (props) => (
  <Flex
    align="center"
    position="absolute"
    left={0}
    height="100%"
    px="3x"
    // The z-index value should be at least 3 for the prepeneded input adornment
    zIndex={3}
    {...props}
  />
);

const InputAdornmentAppend = (props) => (
  <Flex
    align="center"
    position="absolute"
    right={0}
    height="100%"
    px="3x"
    // The z-index value should be at least 2 for the appended input adornment
    zIndex={2}
    {...props}
  />
);
const InputAdornmentPrepend = (props) => (
  <Flex
    align="center"
    position="absolute"
    left={0}
    height="100%"
    px="3x"
    // The z-index value should be at least 3 for the prepeneded input adornment
    zIndex={3}
    {...props}
  />
);

const InputAdornmentAppend = (props) => (
  <Flex
    align="center"
    position="absolute"
    right={0}
    height="100%"
    px="3x"
    // The z-index value should be at least 2 for the appended input adornment
    zIndex={2}
    {...props}
  />
);

Take a look at the following examples:

EDITABLE EXAMPLE
copy
const InputAdornmentPrepend = (props) => (
  <Flex
    align="center"
    position="absolute"
    left={0}
    px="3x"
    // The z-index value should be at least 3 for the prepeneded input adornment
    zIndex={3}
    {...props}
  />
);

const InputAdornmentAppend = (props) => (
  <Flex
    align="center"
    position="absolute"
    right={0}
    px="3x"
    // The z-index value should be at least 2 for the appended input adornment
    zIndex={2}
    {...props}
  />
);

function Example() {
  const [view, setView] = React.useState(false);
  const toggleView = () => setView(view => !view);
  const [colorMode] = useColorMode();
  const adornmentColor = {
    dark: 'white:tertiary',
    light: 'black:tertiary',
  }[colorMode];
  const adornmentIconName = view ? 'view' : 'view-off';
  const inputType = view ? 'text' : 'password';

  return (
    <Stack direction="column" spacing="4x">
      <Flex position="relative" alignItems="center">
        <InputAdornmentPrepend>
          <Icon icon="mobile" color={adornmentColor} />
        </InputAdornmentPrepend>
        <Input
          placeholder="Mobile phone number"
          px="10x"
        />
      </Flex>
      <Flex position="relative" alignItems="center">
        <InputAdornmentPrepend>
          <Text width="4x" textAlign="center" color={adornmentColor}>$</Text>
        </InputAdornmentPrepend>
        <Input
          placeholder="Enter the amount"
          px="10x"
        />
        <InputAdornmentAppend>
          <Icon icon="check" color="green:50" />
        </InputAdornmentAppend>
      </Flex>
      <Flex position="relative" alignItems="center">
        <Input
          type={inputType}
          defaultValue="Revealed Password"
          placeholder="Password"
          pr="10x"
        />
        <InputAdornmentAppend>
          <ButtonBase onClick={toggleView}>
            <Icon icon={adornmentIconName} color={adornmentColor} />
          </ButtonBase>
        </InputAdornmentAppend>
      </Flex>
    </Stack>
  );
}

render(<Example />);
const InputAdornmentPrepend = (props) => (
  <Flex
    align="center"
    position="absolute"
    left={0}
    px="3x"
    // The z-index value should be at least 3 for the prepeneded input adornment
    zIndex={3}
    {...props}
  />
);

const InputAdornmentAppend = (props) => (
  <Flex
    align="center"
    position="absolute"
    right={0}
    px="3x"
    // The z-index value should be at least 2 for the appended input adornment
    zIndex={2}
    {...props}
  />
);

function Example() {
  const [view, setView] = React.useState(false);
  const toggleView = () => setView(view => !view);
  const [colorMode] = useColorMode();
  const adornmentColor = {
    dark: 'white:tertiary',
    light: 'black:tertiary',
  }[colorMode];
  const adornmentIconName = view ? 'view' : 'view-off';
  const inputType = view ? 'text' : 'password';

  return (
    <Stack direction="column" spacing="4x">
      <Flex position="relative" alignItems="center">
        <InputAdornmentPrepend>
          <Icon icon="mobile" color={adornmentColor} />
        </InputAdornmentPrepend>
        <Input
          placeholder="Mobile phone number"
          px="10x"
        />
      </Flex>
      <Flex position="relative" alignItems="center">
        <InputAdornmentPrepend>
          <Text width="4x" textAlign="center" color={adornmentColor}>$</Text>
        </InputAdornmentPrepend>
        <Input
          placeholder="Enter the amount"
          px="10x"
        />
        <InputAdornmentAppend>
          <Icon icon="check" color="green:50" />
        </InputAdornmentAppend>
      </Flex>
      <Flex position="relative" alignItems="center">
        <Input
          type={inputType}
          defaultValue="Revealed Password"
          placeholder="Password"
          pr="10x"
        />
        <InputAdornmentAppend>
          <ButtonBase onClick={toggleView}>
            <Icon icon={adornmentIconName} color={adornmentColor} />
          </ButtonBase>
        </InputAdornmentAppend>
      </Flex>
    </Stack>
  );
}

render(<Example />);

Validation

Use the isInvalid attribute to indicate that the value entered into an input field does not conform to the format expected by the application. isInvalid can also be used to indicate that a required field has not been filled in.

Set isInvalid to true on the fields that have failed validation, otherwise set it to false if no errors detected.

EDITABLE EXAMPLE
copy
const InlineError = (props) => (
  <Text fontSize="sm" lineHeight="sm" color="red:50" {...props} />
);

const InputField = ({
  value,
  onChange,
  ...props
}) => {
  const isInvalid = (value === '');
  let invalidInputStyle = {};
  if (isInvalid) {
    invalidInputStyle = {
      isInvalid: true,
      pr: '10x',
    };
  }

  return (
    <>
      <Flex position="relative" alignItems="center" mb="1x">
        <Input
          placeholder="Enter your name here"
          value={value}
          onChange={onChange}
          {...invalidInputStyle}
        />
        {isInvalid && (
          <Box position="absolute" right={0}>
            <Icon icon="warning-circle" mx="3x" color="red:50" />
          </Box>
        )}
      </Flex>
      <Box>
        {isInvalid && (
          <InlineError>This is a required field.</InlineError>
        )}
      </Box>
    </>
  );
};

function Example() {
  const [value, setValue] = React.useState('');
  const onChange = (e) => {
    setValue(e.target.value);
  };

  return (
    <InputField value={value} onChange={onChange} />
  );
}

render(<Example />);
const InlineError = (props) => (
  <Text fontSize="sm" lineHeight="sm" color="red:50" {...props} />
);

const InputField = ({
  value,
  onChange,
  ...props
}) => {
  const isInvalid = (value === '');
  let invalidInputStyle = {};
  if (isInvalid) {
    invalidInputStyle = {
      isInvalid: true,
      pr: '10x',
    };
  }

  return (
    <>
      <Flex position="relative" alignItems="center" mb="1x">
        <Input
          placeholder="Enter your name here"
          value={value}
          onChange={onChange}
          {...invalidInputStyle}
        />
        {isInvalid && (
          <Box position="absolute" right={0}>
            <Icon icon="warning-circle" mx="3x" color="red:50" />
          </Box>
        )}
      </Flex>
      <Box>
        {isInvalid && (
          <InlineError>This is a required field.</InlineError>
        )}
      </Box>
    </>
  );
};

function Example() {
  const [value, setValue] = React.useState('');
  const onChange = (e) => {
    setValue(e.target.value);
  };

  return (
    <InputField value={value} onChange={onChange} />
  );
}

render(<Example />);

Props