Input | NativeBase | Universal Components for React and React Native

Playground
const Example = () => {
  return <Input w="100%" mx={3} placeholder="Default Input" _light={{
    placeholderTextColor: "blueGray.400"
  }} _dark={{
    placeholderTextColor: "blueGray.50"
  }} />;
};
const Example = () => {
  return <Input w="100%" mx={3} placeholder="Default Input" _light={{
    placeholderTextColor: "blueGray.400"
  }} _dark={{
    placeholderTextColor: "blueGray.50"
  }} />;
};

Playground
const Example = () => {
  return <Stack space={4} w="100%">
      <Center>
        <Heading>Input Sizes</Heading>
      </Center>
      <Input size="xs" placeholder="xs Input" _light={{
      placeholderTextColor: "blueGray.400"
    }} _dark={{
      placeholderTextColor: "blueGray.50"
    }} />
      <Input size="sm" placeholder="sm Input" _light={{
      placeholderTextColor: "blueGray.400"
    }} _dark={{
      placeholderTextColor: "blueGray.50"
    }} />
      <Input size="md" placeholder="md Input" _light={{
      placeholderTextColor: "blueGray.400"
    }} _dark={{
      placeholderTextColor: "blueGray.50"
    }} />
      <Input size="lg" placeholder="lg Input" _light={{
      placeholderTextColor: "blueGray.400"
    }} _dark={{
      placeholderTextColor: "blueGray.50"
    }} />
      <Input size="xl" placeholder="xl Input" _light={{
      placeholderTextColor: "blueGray.400"
    }} _dark={{
      placeholderTextColor: "blueGray.50"
    }} />
      <Input size="2xl" placeholder="2xl Input" _light={{
      placeholderTextColor: "blueGray.400"
    }} _dark={{
      placeholderTextColor: "blueGray.50"
    }} />
    </Stack>;
};
const Example = () => {
  return <Stack space={4} w="100%">
      <Center>
        <Heading>Input Sizes</Heading>
      </Center>
      <Input size="xs" placeholder="xs Input" _light={{
      placeholderTextColor: "blueGray.400"
    }} _dark={{
      placeholderTextColor: "blueGray.50"
    }} />
      <Input size="sm" placeholder="sm Input" _light={{
      placeholderTextColor: "blueGray.400"
    }} _dark={{
      placeholderTextColor: "blueGray.50"
    }} />
      <Input size="md" placeholder="md Input" _light={{
      placeholderTextColor: "blueGray.400"
    }} _dark={{
      placeholderTextColor: "blueGray.50"
    }} />
      <Input size="lg" placeholder="lg Input" _light={{
      placeholderTextColor: "blueGray.400"
    }} _dark={{
      placeholderTextColor: "blueGray.50"
    }} />
      <Input size="xl" placeholder="xl Input" _light={{
      placeholderTextColor: "blueGray.400"
    }} _dark={{
      placeholderTextColor: "blueGray.50"
    }} />
      <Input size="2xl" placeholder="2xl Input" _light={{
      placeholderTextColor: "blueGray.400"
    }} _dark={{
      placeholderTextColor: "blueGray.50"
    }} />
    </Stack>;
};

Playground
const Example = () => {
  return <Stack space={4} w="100%">
      <Center>
        <Heading>Input Variants</Heading>
      </Center>
      <Input variant="outline" placeholder="Outline" _light={{
      placeholderTextColor: "blueGray.400"
    }} _dark={{
      placeholderTextColor: "blueGray.50"
    }} />
      <Input variant="filled" placeholder="Filled" _light={{
      placeholderTextColor: "blueGray.400"
    }} _dark={{
      placeholderTextColor: "blueGray.50"
    }} />
      <Input variant="underlined" placeholder="Underlined" _light={{
      placeholderTextColor: "blueGray.400"
    }} _dark={{
      placeholderTextColor: "blueGray.50"
    }} />
      <Input variant="unstyled" placeholder="Unstyled" _light={{
      placeholderTextColor: "blueGray.400"
    }} _dark={{
      placeholderTextColor: "blueGray.50"
    }} />
      <Input variant="rounded" placeholder="Round" _light={{
      placeholderTextColor: "blueGray.400"
    }} _dark={{
      placeholderTextColor: "blueGray.50"
    }} />
    </Stack>;
};
const Example = () => {
  return <Stack space={4} w="100%">
      <Center>
        <Heading>Input Variants</Heading>
      </Center>
      <Input variant="outline" placeholder="Outline" _light={{
      placeholderTextColor: "blueGray.400"
    }} _dark={{
      placeholderTextColor: "blueGray.50"
    }} />
      <Input variant="filled" placeholder="Filled" _light={{
      placeholderTextColor: "blueGray.400"
    }} _dark={{
      placeholderTextColor: "blueGray.50"
    }} />
      <Input variant="underlined" placeholder="Underlined" _light={{
      placeholderTextColor: "blueGray.400"
    }} _dark={{
      placeholderTextColor: "blueGray.50"
    }} />
      <Input variant="unstyled" placeholder="Unstyled" _light={{
      placeholderTextColor: "blueGray.400"
    }} _dark={{
      placeholderTextColor: "blueGray.50"
    }} />
      <Input variant="rounded" placeholder="Round" _light={{
      placeholderTextColor: "blueGray.400"
    }} _dark={{
      placeholderTextColor: "blueGray.50"
    }} />
    </Stack>;
};

Playground
const Example = () => {
  return <Box w="100%">
      <Input InputLeftElement={<Icon as={<MaterialIcons name="phone" />} size="md" m={2} _light={{
      color: "black"
    }} _dark={{
      color: "gray.300"
    }} />} InputRightElement={<Icon as={<MaterialIcons name="person" />} size="md" m={2} _light={{
      color: "black"
    }} _dark={{
      color: "gray.300"
    }} />} placeholder="Input" // mx={4}
    _light={{
      placeholderTextColor: "blueGray.400"
    }} _dark={{
      placeholderTextColor: "blueGray.50"
    }} />
    </Box>;
};
const Example = () => {
  return <Box w="100%">
      <Input InputLeftElement={<Icon as={<MaterialIcons name="phone" />} size="md" m={2} _light={{
      color: "black"
    }} _dark={{
      color: "gray.300"
    }} />} InputRightElement={<Icon as={<MaterialIcons name="person" />} size="md" m={2} _light={{
      color: "black"
    }} _dark={{
      color: "gray.300"
    }} />} placeholder="Input" // mx={4}
    _light={{
      placeholderTextColor: "blueGray.400"
    }} _dark={{
      placeholderTextColor: "blueGray.50"
    }} />
    </Box>;
};

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

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

  return <Input type={show ? "text" : "password"} InputRightElement={<Button ml={1} roundedLeft={0} roundedRight="md" 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"} InputRightElement={<Button ml={1} roundedLeft={0} roundedRight="md" 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 width="100%" // mx={3}
  value={value} onChange={handleChange} placeholder="Value Controlled Input" />;
};
const Example = () => {
  const [value, setValue] = React.useState("");

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

  return <Input width="100%" // mx={3}
  value={value} onChange={handleChange} placeholder="Value Controlled Input" />;
};

Playground
const Example = () => {
  return <FormControl isRequired isInvalid>
      <Stack mx={2}>
        <FormControl.Label>Form Controlled Input</FormControl.Label>
        <Input placeholder="FormControl is providing me isInvalid prop" my={2} _light={{
        placeholderTextColor: "blueGray.400"
      }} _dark={{
        placeholderTextColor: "blueGray.50"
      }} />
        <FormControl.HelperText>I am a Helper text 😊</FormControl.HelperText>
        <FormControl.ErrorMessage>
          I'll only appear when FormControl have isInvalid props.
        </FormControl.ErrorMessage>
      </Stack>
    </FormControl>;
};
const Example = () => {
  return <FormControl isRequired isInvalid>
      <Stack mx={2}>
        <FormControl.Label>Form Controlled Input</FormControl.Label>
        <Input placeholder="FormControl is providing me isInvalid prop" my={2} _light={{
        placeholderTextColor: "blueGray.400"
      }} _dark={{
        placeholderTextColor: "blueGray.50"
      }} />
        <FormControl.HelperText>I am a Helper text 😊</FormControl.HelperText>
        <FormControl.ErrorMessage>
          I'll only appear when FormControl have isInvalid props.
        </FormControl.ErrorMessage>
      </Stack>
    </FormControl>;
};

outline

md

outline

md