InputBase

Standard input frame around arbitrary content

Import: import { InputBase } from 'react-native-mantine';

Usage

import { InputBase, Pill, Group } from 'react-native-mantine';

// Custom content inside the input frame
<InputBase label="Technologies" multiline>
  <Group spacing={4}>
    <Pill size="sm">React</Pill>
    <Pill size="sm">React Native</Pill>
  </Group>
</InputBase>

// Pressable frame for picker-like inputs
<InputBase
  label="Pick a value"
  onPress={() => openPicker()}
  rightSection={<Icon name="chevron-down" size={12} />}
>
  <Text size="sm">{value ?? 'Nothing selected'}</Text>
</InputBase>

Props

Prop	Type	Default	Description
`children`	`React.ReactNode`		Content rendered inside the input frame
`label`	`React.ReactNode`		Input label
`description`	`React.ReactNode`		Input description
`error`	`React.ReactNode`		Error message
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`"sm"`	Controls input height and font size
`radius`	`MantineNumberSize`	`"sm"`	Key of theme.radius or any valid value to set border-radius
`icon`	`React.ReactNode`		Icon displayed on the left side of input
`rightSection`	`React.ReactNode`		Right section of input
`rightSectionWidth`	`number`		Right section width
`required`	`boolean`	`false`	Displays required asterisk
`variant`	`'default' \| 'filled' \| 'unstyled'`	`"default"`	Input variant
`disabled`	`boolean`	`false`	Disables interaction and dims the input
`multiline`	`boolean`	`false`	Allows the frame to grow with its content instead of a fixed height
`onPress`	`() => void`		Called when the input frame is pressed, makes the frame pressable
`wrapperStyle`	`StyleProp<ViewStyle>`		Input wrapper style
`accessibilityLabel`	`string`		Accessibility label of the pressable frame

Source on GitHub · npm