Controls

Convenience meta-package that re-exports every form-control component from the toolkit. Install one package instead of many; refer to each component's own page for detailed API and accessibility notes.

Installation

npm install @xsolla/xui-controls

Imports

import { Button, DragDropUploader, Input, Select, Switch, Checkbox, RadioGroup } from '@xsolla/xui-controls';

Quick start

import { Button, Input } from '@xsolla/xui-controls';

export default function Example() {
  const [name, setName] = React.useState('');
  return (
    <>
      <Input value={name} onChangeText={setName} label="Name" />
      <Button variant="primary" onPress={() => console.log(name)}>Save</Button>
    </>
  );
}

Re-exported packages

| Component(s) | Source package | | :----------- | :------------- | | Autocomplete | @xsolla/xui-autocomplete | | Button | @xsolla/xui-button | | Calendar | @xsolla/xui-calendar | | Checkbox | @xsolla/xui-checkbox | | CheckboxTagGroup | @xsolla/xui-checkbox-tag-group | | DatePicker | @xsolla/xui-date-picker | | DragDropUploader | @xsolla/xui-drag-drop-uploader | | Dropdown | @xsolla/xui-dropdown | | Input | @xsolla/xui-input | | InputCopy | @xsolla/xui-input-copy | | InputPassword | @xsolla/xui-input-password | | InputPayment | @xsolla/xui-input-payment | | InputPhone | @xsolla/xui-input-phone | | InputPin | @xsolla/xui-input-pin | | MultiSelect | @xsolla/xui-multi-select | | Radio | @xsolla/xui-radio | | RadioGroup | @xsolla/xui-radio-group | | Select | @xsolla/xui-select | | Slider | @xsolla/xui-slider | | StatusDropdown | @xsolla/xui-status-dropdown | | Switch | @xsolla/xui-switch | | Textarea | @xsolla/xui-textarea | | ToggleButtonGroup | @xsolla/xui-toggle-button-group | | Uploader | @xsolla/xui-uploader |

See each component's dedicated page for props, examples, and accessibility details.

Utilities

getMonthInLocale

getMonthInLocale(month: number, locale?: CalendarLocaleType): string

Re-exported from @xsolla/xui-calendar. Returns the localised month name ("LLLL" format) for a 0-indexed month, using the supplied date-fns locale (defaults to the calendar's default locale).