Join

Join wraps around a set of buttons and joins them together, horizontally. It replaces ButtonGroup and InputGroup and can be more flexibly used with any element.

With Join

Without Join

Code Example

<Join>
  <Button join>Button 1</Button>
  <Button join>Button 2</Button>
  <Button join>Button 3</Button>
</Join>

Components

Join wraps other components.

Join

Join has no props.

Join Components

The following components have a join prop to work as join items.

Join Elements

You can use the join-item utility class on any element.

Flex, Input, & Button

Code Example

<Join>
  <Flex join class="w-12 h-12 bg-base-200 items-center justify-center">
    <Icon name="feather:search" class="text-xl" />
  </Flex>
  <TextInput join bordered placeholder="Search">
    Button 2
  </TextInput>
  <Button join>
    Search
  </Button>
</Join>

Text, Select, Flex & Toggle

Here's a contrived example to show that you can basically throw almost anything into Join.

Select your favorite component

Toggle if you really like it:

Code Example

<Join>
  <Text join class="h-12 bg-base-200 flex items-center px-4">
    Select your favorite component
  </Text>
  <Select
    v-model="selected"
    :options="options"
    join
    bordered
    placeholder="Search"
  />
  <Flex join class="h-12 p-4 bg-base-200 items-center gap-2">
    Toggle if you really like it:
    <Toggle />
  </Flex>
</Join>

Buttons

Color is handled on each individual button.

Code Example

<Join>
  <Button join primary> Button 1 </Button>
  <Button join>Button 2</Button>
  <Button join>Button 3</Button>
</Join>

Text on Left of TextInput

Your Email

Code Example

<FormControl>
  <Label>
    <LabelText>Your Email</LabelText>
  </Label>
  <Join>
    <Text join>Email</Text>
    <TextInput join bordered placeholder="[email protected]" />
  </Join>
</FormControl>

Text on Right of TextInput

Enter Amount

BTC

Code Example

<FormControl>
  <Label>
    <LabelText>Enter Amount</LabelText>
  </Label>
  <Join>
    <TextInput join bordered placeholder="0.01" />
    <Text join>BTC</Text>
  </Join>
</FormControl>

Text on Both Sides of TextInput

Enter amount

Price USD

Code Example

<FormControl>
  <Label>
    <LabelText>Enter amount</LabelText>
  </Label>
  <Join>
    <Text join>Price</Text>
    <TextInput join bordered placeholder="10" />
    <Text join>USD</Text>
  </Join>
</FormControl>

Text Above TextInput

Your Email

Code Example

<FormControl>
  <Label>
    <LabelText>Your Email</LabelText>
  </Label>
  <Join vertical>
    <Text join>Email</Text>
    <TextInput join bordered placeholder="[email protected]" />
  </Join>
</FormControl>

TextInput by Button

Code Example

<FormControl>
  <Join>
    <TextInput join bordered placeholder="Search" />
    <Button join square>
      <Icon name="feather:search" :style="{ fontSize: '1.4em' }" />
    </Button>
  </Join>
</FormControl>

Select by Button

Code Example

<FormControl>
  <Join>
    <Select join bordered v-model="selectedCategory" :options="categories" />
    <Button join>Go</Button>
  </Join>
</FormControl>

Prev Indicator

Next Mask