Input | NativeBase | Universal Components for React and React Native

Show Code
Playground
const Example = () => {
  return <Input shadow={2} _light={{
    bg: "coolGray.100",
    _hover: {
      bg: "coolGray.200"
    },
    _focus: {
      bg: "coolGray.200:alpha.70"
    }
  }} _dark={{
    bg: "coolGray.800",
    _hover: {
      bg: "coolGray.900"
    },
    _focus: {
      bg: "coolGray.900:alpha.70"
    }
  }} placeholder="Enter your name" />;
};
const Example = () => {
  return <Input shadow={2} _light={{
    bg: "coolGray.100",
    _hover: {
      bg: "coolGray.200"
    },
    _focus: {
      bg: "coolGray.200:alpha.70"
    }
  }} _dark={{
    bg: "coolGray.800",
    _hover: {
      bg: "coolGray.900"
    },
    _focus: {
      bg: "coolGray.900:alpha.70"
    }
  }} placeholder="Enter your name" />;
};

Playground
const Example = () => {
  return <Box alignItems="center">
      <Input mx="3" placeholder="Input" w="100%" />
    </Box>;
};
const Example = () => {
  return <Box alignItems="center">
      <Input mx="3" placeholder="Input" w="100%" />
    </Box>;
};

Playground
const Example = () => {
  return <Stack space={4} w="75%" maxW="300px" mx="auto">
      <Input size="xs" placeholder="xs Input" />
      <Input size="sm" placeholder="sm Input" />
      <Input size="md" placeholder="md Input" />
      <Input size="lg" placeholder="lg Input" />
      <Input size="xl" placeholder="xl Input" />
      <Input size="2xl" placeholder="2xl Input" />
    </Stack>;
};
const Example = () => {
  return <Stack space={4} w="75%" maxW="300px" mx="auto">
      <Input size="xs" placeholder="xs Input" />
      <Input size="sm" placeholder="sm Input" />
      <Input size="md" placeholder="md Input" />
      <Input size="lg" placeholder="lg Input" />
      <Input size="xl" placeholder="xl Input" />
      <Input size="2xl" placeholder="2xl Input" />
    </Stack>;
};

Playground
const Example = () => {
  return <Stack space={4} w="75%" maxW="300px" mx="auto">
      <Input variant="outline" placeholder="Outline" />
      <Input variant="filled" placeholder="Filled" />
      <Input variant="underlined" placeholder="Underlined" />
      <Input variant="unstyled" placeholder="Unstyled" />
      <Input variant="rounded" placeholder="Round" />
    </Stack>;
};
const Example = () => {
  return <Stack space={4} w="75%" maxW="300px" mx="auto">
      <Input variant="outline" placeholder="Outline" />
      <Input variant="filled" placeholder="Filled" />
      <Input variant="underlined" placeholder="Underlined" />
      <Input variant="unstyled" placeholder="Unstyled" />
      <Input variant="rounded" placeholder="Round" />
    </Stack>;
};

Playground
const Example = () => {
  return <Stack>
      <InputGroup w={{
      base: "70%",
      md: "285"
    }} justifyContent="center">
        <InputLeftAddon children={"https://"} />
        <Input w={{
        base: "70%",
        md: "100%"
      }} placeholder="nativebase" />
        <InputRightAddon children={".io"} />
      </InputGroup>
    </Stack>;
};
const Example = () => {
  return <Stack>
      <InputGroup w={{
      base: "70%",
      md: "285"
    }} justifyContent="center">
        <InputLeftAddon children={"https://"} />
        <Input w={{
        base: "70%",
        md: "100%"
      }} placeholder="nativebase" />
        <InputRightAddon children={".io"} />
      </InputGroup>
    </Stack>;
};

Playground
const Example = () => {
  const [show, setShow] = React.useState(false);
  return <Stack space={4} w="100%" alignItems="center">
      <Input w={{
      base: "75%",
      md: "25%"
    }} InputLeftElement={<Icon as={<MaterialIcons name="person" />} size={5} ml="2" color="muted.400" />} placeholder="Name" />
      <Input w={{
      base: "75%",
      md: "25%"
    }} type={show ? "text" : "password"} InputRightElement={<Pressable onPress={() => setShow(!show)}>
            <Icon as={<MaterialIcons name={show ? "visibility" : "visibility-off"} />} size={5} mr="2" color="muted.400" />
          </Pressable>} placeholder="Password" />
    </Stack>;
};
const Example = () => {
  const [show, setShow] = React.useState(false);
  return <Stack space={4} w="100%" alignItems="center">
      <Input w={{
      base: "75%",
      md: "25%"
    }} InputLeftElement={<Icon as={<MaterialIcons name="person" />} size={5} ml="2" color="muted.400" />} placeholder="Name" />
      <Input w={{
      base: "75%",
      md: "25%"
    }} type={show ? "text" : "password"} InputRightElement={<Pressable onPress={() => setShow(!show)}>
            <Icon as={<MaterialIcons name={show ? "visibility" : "visibility-off"} />} size={5} mr="2" color="muted.400" />
          </Pressable>} placeholder="Password" />
    </Stack>;
};

Playground
const Example = () => {
  const [show, setShow] = React.useState(false);

  const handleClick = () => setShow(!show);

  return <Box alignItems="center">
      <Input type={show ? "text" : "password"} w="100%" py="0" InputRightElement={<Button size="xs" rounded="none" w="1/6" h="full" onPress={handleClick}>
            {show ? "Hide" : "Show"}
          </Button>} placeholder="Password" />
    </Box>;
};
const Example = () => {
  const [show, setShow] = React.useState(false);

  const handleClick = () => setShow(!show);

  return <Box alignItems="center">
      <Input type={show ? "text" : "password"} w="100%" py="0" InputRightElement={<Button size="xs" rounded="none" w="1/6" h="full" onPress={handleClick}>
            {show ? "Hide" : "Show"}
          </Button>} placeholder="Password" />
    </Box>;
};

Playground
const Example = () => {
  const [value, setValue] = React.useState("");

  const handleChange = text => setValue(text);

  return <Box alignItems="center">
      <Input value={value} w="100%" onChangeText={handleChange} placeholder="Value Controlled Input" />
    </Box>;
};
const Example = () => {
  const [value, setValue] = React.useState("");

  const handleChange = text => setValue(text);

  return <Box alignItems="center">
      <Input value={value} w="100%" onChangeText={handleChange} placeholder="Value Controlled Input" />
    </Box>;
};

Playground
const Example = () => {
  return <Box alignItems="center">
      <FormControl isInvalid w="75%" maxW="300px">
        <FormControl.Label>Password</FormControl.Label>
        <Input placeholder="Enter password" />
        <FormControl.ErrorMessage leftIcon={<WarningOutlineIcon size="xs" />}>
          Try different from previous passwords.
        </FormControl.ErrorMessage>
      </FormControl>
    </Box>;
};
const Example = () => {
  return <Box alignItems="center">
      <FormControl isInvalid w="75%" maxW="300px">
        <FormControl.Label>Password</FormControl.Label>
        <Input placeholder="Enter password" />
        <FormControl.ErrorMessage leftIcon={<WarningOutlineIcon size="xs" />}>
          Try different from previous passwords.
        </FormControl.ErrorMessage>
      </FormControl>
    </Box>;
};