Bounding

A cross-platform container that constrains its child to a width range, useful for form fields and other width-sensitive content.

Installation

npm install @xsolla/xui-bounding

Imports

import { Bounding } from "@xsolla/xui-bounding";

Quick start

import * as React from "react";
import { Bounding } from "@xsolla/xui-bounding";
import { Input } from "@xsolla/xui-input";

export default function QuickStart() {
  return (
    <Bounding>
      <Input placeholder="Width-constrained input" />
    </Bounding>
  );
}

API Reference

<Bounding>

Extends BoxProps (minus children); any layout/style prop the underlying Box accepts is forwarded.

| Prop | Type | Default | Description | | ---------- | ------------------ | ------- | ------------------------------------------------------------------------------------------------------------- | | testID | string | — | Test ID for testing frameworks. On web this renders as data-testid; on React Native it renders as testID. | | children | ReactNode | - | Content to constrain. | | flexible | boolean | false | When true, uses inline-flex so the container sits inline with surrounding content. | | minimal | boolean | false | When true, sets min-width: auto instead of the default minimum. | | minWidth | number \| string | 140 | Minimum width. Numbers are pixels; strings are passed through verbatim. Ignored when minimal is set. | | maxWidth | number \| string | 400 | Maximum width. Numbers are pixels; strings are passed through verbatim. |

Anatomy

import { Bounding } from "@xsolla/xui-bounding";

<Bounding minWidth={200} maxWidth={500}>
  <Content />
</Bounding>;

Examples

Custom bounds

import * as React from "react";
import { Bounding } from "@xsolla/xui-bounding";
import { Input } from "@xsolla/xui-input";

export default function CustomBounds() {
  return (
    <Bounding minWidth={200} maxWidth={500}>
      <Input placeholder="200-500px" />
    </Bounding>
  );
}

Inline mode

import * as React from "react";
import { Bounding } from "@xsolla/xui-bounding";
import { Button } from "@xsolla/xui-button";

export default function Inline() {
  return (
    <Bounding flexible>
      <Button>Inline button</Button>
    </Bounding>
  );
}

Minimal width

import * as React from "react";
import { Bounding } from "@xsolla/xui-bounding";
import { Tag } from "@xsolla/xui-tag";

export default function Minimal() {
  return (
    <Bounding minimal>
      <Tag>Auto width</Tag>
    </Bounding>
  );
}

Percentage bounds

import * as React from "react";
import { Bounding } from "@xsolla/xui-bounding";
import { Input } from "@xsolla/xui-input";

export default function PercentageBounds() {
  return (
    <Bounding minWidth="50%" maxWidth="100%">
      <Input placeholder="Half-to-full width" />
    </Bounding>
  );
}

Accessibility

Bounding is purely presentational and adds no roles or ARIA attributes. Constrain content widely enough that text wrapping and reflow remain comfortable for users at large text sizes.