ElementGroup

Surfaces & Layout

ElementGroup

Utility wrapper for grouping inputs with shared borders and state styles.

Usage

Combine related controls like segmented buttons, chips, or stacked text inputs.

Highlights

• Controls spacing and divider rendering
• Token-driven radius merging

When to use it

• You need to visually connect multiple inputs.
• A11y focus outlines should cover the whole group.

Related components

InputAddonTextInput

Examples

Button Group

Preview (Web)

import { ElementGroup } from 'react-native-molecules/components/ElementGroup';
import { Button } from 'react-native-molecules/components/Button';
import { Icon } from 'react-native-molecules/components/Icon';

export default function Example() {
  return (
      <ElementGroup style={{ borderRadius: 12 }}>
          <Button variant="contained" onPress={() => {}}>
              Button
          </Button>
          <Button variant="contained" onPress={() => {}}>
              <Icon name="chevron-down" size={26} />
          </Button>
      </ElementGroup>
  );
}

Text Input Element Group

Preview (Web)

import { ElementGroup } from 'react-native-molecules/components/ElementGroup';
import { TextInput } from 'react-native-molecules/components/TextInput';
import { Button } from 'react-native-molecules/components/Button';
import { Icon } from 'react-native-molecules/components/Icon';

export default function Example() {
  return (
      <ElementGroup borderRadius={12}>
          <TextInput variant="outlined" />
          <Button variant="contained" onPress={() => {}}>
              <Icon name="chevron-down" size={26} />
          </Button>
      </ElementGroup>
  );
}

Prop	Type	Default	Description
orientation	"horizontal" | "vertical" | undefined	—	—
borderRadius	string | number | undefined	—	—
style	ViewStyle | undefined	—	—

Defined in react-native-molecules/components/ElementGroup