Input | NativeBase | Universal Components for React and React Native

Playground
const Example = () => {
  return <Input mx="3" placeholder="Input" w={{
    base: "75%",
    md: "25%"
  }} />;
};
const Example = () => {
  return <Input mx="3" placeholder="Input" w={{
    base: "75%",
    md: "25%"
  }} />;
};

Playground
const Example = () => {
  return <Stack mt={3} space={4} w={{
    base: "75%",
    md: "25%"
  }}>
      <Center>
        <Heading textAlign="center" mb="10">
          Input sizes
        </Heading>
      </Center>
      <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 mt={3} space={4} w={{
    base: "75%",
    md: "25%"
  }}>
      <Center>
        <Heading textAlign="center" mb="10">
          Input sizes
        </Heading>
      </Center>
      <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={{
    base: "75%",
    md: "25%"
  }}>
      <Center>
        <Heading textAlign="center" mb="10">
          Input Variants
        </Heading>
      </Center>
      <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={{
    base: "75%",
    md: "25%"
  }}>
      <Center>
        <Heading textAlign="center" mb="10">
          Input Variants
        </Heading>
      </Center>
      <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 alignItems="center">
      <InputGroup w={{
      base: "70%",
      md: "285"
    }}>
        <InputLeftAddon children={"https://"} />
        <Input w={{
        base: "70%",
        md: "100%"
      }} placeholder="nativebase" />
        <InputRightAddon children={".io"} />
      </InputGroup>
    </Stack>;
};
const Example = () => {
  return <Stack alignItems="center">
      <InputGroup w={{
      base: "70%",
      md: "285"
    }}>
        <InputLeftAddon children={"https://"} />
        <Input w={{
        base: "70%",
        md: "100%"
      }} placeholder="nativebase" />
        <InputRightAddon children={".io"} />
      </InputGroup>
    </Stack>;
};

Playground
const Example = () => {
  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%"
    }} InputRightElement={<Icon as={<MaterialIcons name="visibility-off" />} size={5} mr="2" color="muted.400" />} placeholder="Password" />
    </Stack>;
};
const Example = () => {
  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%"
    }} InputRightElement={<Icon as={<MaterialIcons name="visibility-off" />} size={5} mr="2" color="muted.400" />} placeholder="Password" />
    </Stack>;
};

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

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

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

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

  return <Input type={show ? "text" : "password"} w={{
    base: "75%",
    md: "25%"
  }} InputRightElement={<Button size="xs" rounded="none" w="1/6" h="full" onPress={handleClick}>
          {show ? "Hide" : "Show"}
        </Button>} placeholder="Password" />;
};

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

  const handleChange = event => setValue(event.target.value);

  return <Input value={value} w={{
    base: "75%",
    md: "25%"
  }} onChange={handleChange} placeholder="Value Controlled Input" />;
};
const Example = () => {
  const [value, setValue] = React.useState("");

  const handleChange = event => setValue(event.target.value);

  return <Input value={value} w={{
    base: "75%",
    md: "25%"
  }} onChange={handleChange} placeholder="Value Controlled Input" />;
};

Playground
const Example = () => {
  return <FormControl isInvalid w={{
    base: "75%",
    md: "25%"
  }}>
      <FormControl.Label>Password</FormControl.Label>
      <Input placeholder="Enter password" />
      <FormControl.ErrorMessage leftIcon={<WarningOutlineIcon size="xs" />}>
        Try different from previous passwords.
      </FormControl.ErrorMessage>
    </FormControl>;
};
const Example = () => {
  return <FormControl isInvalid w={{
    base: "75%",
    md: "25%"
  }}>
      <FormControl.Label>Password</FormControl.Label>
      <Input placeholder="Enter password" />
      <FormControl.ErrorMessage leftIcon={<WarningOutlineIcon size="xs" />}>
        Try different from previous passwords.
      </FormControl.ErrorMessage>
    </FormControl>;
};

outline

md

outline

md