or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

configuration.md data-display.md data-entry.md feedback.md index.md layout.md other-components.md

tile.json

Data Entry Components

Core input and form components for collecting user data, including text inputs, selectors, date pickers, and file uploads. All data entry components support validation, error handling, and controlled/uncontrolled modes.

Capabilities

Input Components

Text input with support for various input types and compound sub-components.

interface InputProps {
  addonAfter?: React.ReactNode;
  addonBefore?: React.ReactNode;
  allowClear?: boolean | { clearIcon?: React.ReactNode };
  bordered?: boolean;
  defaultValue?: string;
  disabled?: boolean;
  id?: string;
  maxLength?: number;
  placeholder?: string;
  prefix?: React.ReactNode;
  size?: SizeType;
  status?: "" | "error" | "warning";
  suffix?: React.ReactNode;
  type?: string;
  value?: string;
  variant?: "outlined" | "borderless" | "filled";
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
  onPressEnter?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
}

interface InputRef {
  focus: (options?: InputFocusOptions) => void;
  blur: () => void;
  select: () => void;
  input: HTMLInputElement | null;
}

declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>> & {
  Group: React.FC<GroupProps>;
  Search: React.FC<SearchProps>;
  TextArea: React.FC<TextAreaProps>;
  Password: React.FC<PasswordProps>;
  OTP: React.FC<OTPProps>;
};

// Sub-components
interface SearchProps extends InputProps {
  enterButton?: boolean | React.ReactNode;
  loading?: boolean;
  onSearch?: (value: string, event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLInputElement>) => void;
}

interface TextAreaProps {
  autoSize?: boolean | { minRows?: number; maxRows?: number };
  bordered?: boolean;
  defaultValue?: string;
  maxLength?: number;
  placeholder?: string;
  rows?: number;
  showCount?: boolean | { formatter: (info: { value: string; count: number; maxLength?: number }) => string };
  value?: string;
  onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
}

interface PasswordProps extends InputProps {
  iconRender?: (visible: boolean) => React.ReactNode;
  visibilityToggle?: boolean | VisibilityToggle;
}

interface OTPProps {
  defaultValue?: string;
  disabled?: boolean;
  formatter?: (str: string) => string;
  length?: number;
  mask?: boolean | string;
  size?: SizeType;
  status?: "error" | "warning";
  value?: string;
  variant?: "outlined" | "borderless" | "filled";
  onChange?: (text: string) => void;
  onFinish?: (text: string) => void;
}

interface GroupProps {
  className?: string;
  compact?: boolean;
  style?: React.CSSProperties;
  children?: React.ReactNode;
}

Usage Examples:

import { Input } from "antd";

// Basic input
<Input placeholder="Enter your name" />

// Input with prefix/suffix
<Input
  placeholder="Enter amount"
  prefix="$"
  suffix="USD"
  type="number"
/>

// Search input
<Input.Search
  placeholder="Search products"
  allowClear
  enterButton="Search"
  size="large"
  onSearch={(value) => console.log(value)}
/>

// Password input
<Input.Password
  placeholder="Enter password"
  iconRender={(visible) => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
/>

// OTP input
<Input.OTP length={6} onChange={(text) => console.log('OTP:', text)} />

Select Components

Dropdown selection component with support for single, multiple, and searchable modes.

interface SelectProps<ValueType = any> {
  allowClear?: boolean;
  autoClearSearchValue?: boolean;
  autoFocus?: boolean;
  bordered?: boolean;
  clearIcon?: React.ReactNode;
  defaultActiveFirstOption?: boolean;
  defaultOpen?: boolean;
  defaultValue?: ValueType;
  disabled?: boolean;
  dropdownClassName?: string;
  dropdownMatchSelectWidth?: boolean | number;
  filterOption?: boolean | FilterFunc<OptionType>;
  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
  labelInValue?: boolean;
  loading?: boolean;
  maxTagCount?: number | "responsive";
  mode?: "multiple" | "tags";
  notFoundContent?: React.ReactNode;
  open?: boolean;
  optionFilterProp?: string;
  optionLabelProp?: string;
  placeholder?: React.ReactNode;
  placement?: "bottomLeft" | "bottomRight" | "topLeft" | "topRight";
  removeIcon?: React.ReactNode;
  searchValue?: string;
  showArrow?: boolean;
  showSearch?: boolean;
  size?: SizeType;
  status?: "error" | "warning";
  suffixIcon?: React.ReactNode;
  tagRender?: (props: CustomTagProps) => React.ReactElement;
  tokenSeparators?: string[];
  value?: ValueType;
  variant?: "outlined" | "borderless" | "filled";
  virtual?: boolean;
  onChange?: (value: ValueType, option: OptionType | OptionType[]) => void;
  onClear?: () => void;
  onDeselect?: (value: ValueType, option: OptionType) => void;
  onDropdownVisibleChange?: (open: boolean) => void;
  onFocus?: () => void;
  onInputKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
  onPopupScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
  onSearch?: (value: string) => void;
  onSelect?: (value: ValueType, option: OptionType) => void;
  options?: OptionType[];
  children?: React.ReactNode;
}

interface OptionType {
  disabled?: boolean;
  label?: React.ReactNode;
  title?: string;
  value?: string | number;
  children?: React.ReactNode;
}

declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<RefSelectProps>> & {
  Option: React.FC<OptionType>;
  OptGroup: React.FC<OptGroupProps>;
};

interface OptGroupProps {
  label?: React.ReactNode;
  children?: React.ReactNode;
}

Usage Examples:

import { Select } from "antd";

// Basic select
<Select
  defaultValue="option1"
  style={{ width: 200 }}
  options={[
    { value: "option1", label: "Option 1" },
    { value: "option2", label: "Option 2" },
  ]}
/>

// Multiple select
<Select
  mode="multiple"
  allowClear
  placeholder="Please select"
  options={options}
  onChange={(values) => console.log(values)}
/>

// Searchable select
<Select
  showSearch
  placeholder="Search to Select"
  optionFilterProp="children"
  filterOption={(input, option) =>
    (option?.label ?? "").toLowerCase().includes(input.toLowerCase())
  }
  options={options}
/>

Form Components

Comprehensive form management with validation, layout, and data binding.

interface FormProps<Values = any> {
  component?: false | string | React.ComponentType<any>;
  colon?: boolean;
  disabled?: boolean;
  fields?: FieldData[];
  form?: FormInstance<Values>;
  initialValues?: Partial<Values>;
  labelAlign?: "left" | "right";
  labelCol?: ColProps;
  labelWrap?: boolean;
  layout?: "horizontal" | "vertical" | "inline";
  name?: string;
  preserve?: boolean;
  requiredMark?: boolean | "optional" | ((label: React.ReactNode, info: { required: boolean }) => React.ReactNode);
  scrollToFirstError?: boolean | ScrollToFieldOptions;
  size?: SizeType;
  validateMessages?: ValidateMessages;
  validateTrigger?: string | string[];
  wrapperCol?: ColProps;
  onFieldsChange?: (changedFields: FieldData[], allFields: FieldData[]) => void;
  onFinish?: (values: Values) => void;
  onFinishFailed?: (errorInfo: ValidateErrorEntity<Values>) => void;
  onValuesChange?: (changedValues: Partial<Values>, allValues: Values) => void;
}

interface FormInstance<Values = any> {
  getFieldError: (name: NamePath) => string[];
  getFieldsError: (nameList?: NamePath[]) => FieldError[];
  getFieldsValue: (() => Values) & ((nameList: NamePath[] | true, filterFunc?: (meta: Meta) => boolean) => any);
  getFieldValue: (name: NamePath) => any;
  isFieldsTouched: ((nameList?: NamePath[], allTouched?: boolean) => boolean) & ((allTouched?: boolean) => boolean);
  isFieldTouched: (name: NamePath) => boolean;
  isFieldValidating: (name: NamePath) => boolean;
  resetFields: (fields?: NamePath[]) => void;
  scrollToField: (name: NamePath, options?: ScrollToFieldOptions) => void;
  setFields: (fields: FieldData[]) => void;
  setFieldValue: (name: NamePath, value: any) => void;
  setFieldsValue: (values: Partial<Values>) => void;
  submit: () => void;
  validateFields: ((nameList?: NamePath[]) => Promise<Values>) & ((nameList?: NamePath[], options?: ValidateOptions) => Promise<Values>);
}

interface FormItemProps {
  colon?: boolean;
  dependencies?: NamePath[];
  extra?: React.ReactNode;
  getValueFromEvent?: (...args: any[]) => any;
  getValueProps?: (value: any) => any;
  hasFeedback?: boolean | { icons: FeedbackIcons };
  help?: React.ReactNode;
  hidden?: boolean;
  htmlFor?: string;
  initialValue?: any;
  label?: React.ReactNode;
  labelAlign?: "left" | "right";
  labelCol?: ColProps;
  messageVariables?: Record<string, string>;
  name?: NamePath;
  normalize?: (value: any, prevValue: any, allValues: any) => any;
  noStyle?: boolean;
  preserve?: boolean;
  required?: boolean;
  rules?: Rule[];
  shouldUpdate?: boolean | ((prevValues: any, curValues: any) => boolean);
  tooltip?: React.ReactNode | TooltipProps & { icon?: React.ReactNode };
  trigger?: string;
  validateFirst?: boolean;
  validateStatus?: "success" | "warning" | "error" | "validating";
  validateTrigger?: string | string[];
  valuePropName?: string;
  wrapperCol?: ColProps;
}

declare const Form: React.ForwardRefExoticComponent<FormProps & React.RefAttributes<FormInstance>> & {
  useForm: <Values = any>() => [FormInstance<Values>];
  useFormInstance: <Values = any>() => FormInstance<Values>;
  useWatch: <Values = any>(namePath: NamePath, formInstance?: FormInstance<Values>) => any;
  Item: React.FC<FormItemProps>;
  List: React.FC<FormListProps>;
  ErrorList: React.FC<ErrorListProps>;
  Provider: React.FC<FormProviderProps>;
};

Usage Examples:

import { Form, Input, Button, Select } from "antd";

// Basic form
const MyForm = () => {
  const [form] = Form.useForm();

  const onFinish = (values: any) => {
    console.log("Success:", values);
  };

  return (
    <Form form={form} name="basic" onFinish={onFinish} autoComplete="off">
      <Form.Item
        label="Username"
        name="username"
        rules={[{ required: true, message: "Please input your username!" }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="Email"
        name="email"
        rules={[
          { required: true, message: "Please input your email!" },
          { type: "email", message: "Please enter a valid email!" }
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

// Form with dynamic lists
<Form.List name="users">
  {(fields, { add, remove }) => (
    <>
      {fields.map(({ key, name, ...restField }) => (
        <Space key={key} style={{ display: "flex", marginBottom: 8 }} align="baseline">
          <Form.Item
            {...restField}
            name={[name, "first"]}
            rules={[{ required: true, message: "Missing first name" }]}
          >
            <Input placeholder="First Name" />
          </Form.Item>
          <Form.Item
            {...restField}
            name={[name, "last"]}
            rules={[{ required: true, message: "Missing last name" }]}
          >
            <Input placeholder="Last Name" />
          </Form.Item>
          <MinusCircleOutlined onClick={() => remove(name)} />
        </Space>
      ))}
      <Form.Item>
        <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
          Add field
        </Button>
      </Form.Item>
    </>
  )}
</Form.List>

Date and Time Components

Date and time selection components with various picker modes and localization support.

interface DatePickerProps {
  allowClear?: boolean;
  autoFocus?: boolean;
  bordered?: boolean;
  className?: string;
  defaultValue?: Dayjs;
  disabled?: boolean;
  disabledDate?: (currentDate: Dayjs) => boolean;
  format?: string | string[];
  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
  inputReadOnly?: boolean;
  locale?: PickerLocale;
  mode?: PanelMode;
  nextIcon?: React.ReactNode;
  open?: boolean;
  picker?: "date" | "week" | "month" | "quarter" | "year";
  placeholder?: string;
  placement?: "bottomLeft" | "bottomRight" | "topLeft" | "topRight";
  popupClassName?: string;
  prevIcon?: React.ReactNode;
  showNow?: boolean;
  showTime?: boolean | SharedTimeProps;
  showToday?: boolean;
  size?: SizeType;
  status?: "error" | "warning";
  style?: React.CSSProperties;
  suffixIcon?: React.ReactNode;
  superNextIcon?: React.ReactNode;
  superPrevIcon?: React.ReactNode;
  value?: Dayjs;
  variant?: "outlined" | "borderless" | "filled";
  onChange?: (date: Dayjs | null, dateString: string) => void;
  onOpenChange?: (open: boolean) => void;
  onPanelChange?: (value: Dayjs, mode: PanelMode) => void;
}

declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<PickerRef>> & {
  RangePicker: typeof RangePicker;
  TimePicker: typeof TimePicker;
  WeekPicker: typeof WeekPicker;
  MonthPicker: typeof MonthPicker;
  QuarterPicker: typeof QuarterPicker;
  YearPicker: typeof YearPicker;
};

interface TimePickerProps {
  allowClear?: boolean;
  autoFocus?: boolean;
  bordered?: boolean;
  changeOnScroll?: boolean;
  clearIcon?: React.ReactNode;
  clearText?: string;
  defaultValue?: Dayjs;
  disabled?: boolean;
  disabledTime?: DisabledTime;
  format?: string;
  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
  hideDisabledOptions?: boolean;
  hourStep?: number;
  inputReadOnly?: boolean;
  minuteStep?: number;
  needConfirm?: boolean;
  nowText?: string;
  open?: boolean;
  placeholder?: string;
  placement?: "bottomLeft" | "bottomRight" | "topLeft" | "topRight";
  popupClassName?: string;
  renderExtraFooter?: () => React.ReactNode;
  secondStep?: number;
  showNow?: boolean;
  size?: SizeType;
  status?: "error" | "warning";
  suffixIcon?: React.ReactNode;
  use12Hours?: boolean;
  value?: Dayjs;
  variant?: "outlined" | "borderless" | "filled";
  onChange?: (time: Dayjs | null, timeString: string) => void;
  onOpenChange?: (open: boolean) => void;
}

declare const TimePicker: React.ForwardRefExoticComponent<TimePickerProps & React.RefAttributes<PickerRef>> & {
  RangePicker: typeof TimeRangePicker;
};

Usage Examples:

import { DatePicker, TimePicker } from "antd";
import dayjs from "dayjs";

// Basic date picker
<DatePicker onChange={(date, dateString) => console.log(date, dateString)} />

// Date range picker
<DatePicker.RangePicker
  showTime
  format="YYYY-MM-DD HH:mm:ss"
  onChange={(dates, dateStrings) => console.log(dates, dateStrings)}
/>

// Time picker
<TimePicker
  defaultValue={dayjs("12:08:23", "HH:mm:ss")}
  format="HH:mm:ss"
  onChange={(time, timeString) => console.log(time, timeString)}
/>

// Month picker
<DatePicker picker="month" onChange={(date, dateString) => console.log(date, dateString)} />

Other Input Components

Additional specialized input components for specific data types.

// Checkbox
interface CheckboxProps {
  autoFocus?: boolean;
  checked?: boolean;
  defaultChecked?: boolean;
  disabled?: boolean;
  indeterminate?: boolean;
  value?: any;
  onChange?: (e: CheckboxChangeEvent) => void;
}

interface CheckboxChangeEvent {
  target: {
    checked: boolean;
    name?: string;
    value?: any;
  };
  stopPropagation: () => void;
  preventDefault: () => void;
  nativeEvent: MouseEvent;
}

declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<CheckboxRef>> & {
  Group: React.FC<CheckboxGroupProps>;
};

// Radio
interface RadioProps {
  autoFocus?: boolean;
  checked?: boolean;
  defaultChecked?: boolean;
  disabled?: boolean;
  value?: any;
  onChange?: (e: RadioChangeEvent) => void;
}

declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<RadioRef>> & {
  Group: React.FC<RadioGroupProps>;
  Button: React.FC<RadioButtonProps>;
};

// Switch
interface SwitchProps {
  autoFocus?: boolean;
  checked?: boolean;
  checkedChildren?: React.ReactNode;
  className?: string;
  defaultChecked?: boolean;
  disabled?: boolean;
  loading?: boolean;
  size?: "small" | "default";
  unCheckedChildren?: React.ReactNode;
  value?: boolean;
  onChange?: (checked: boolean, event: Event) => void;
  onClick?: (checked: boolean, event: Event) => void;
}

declare const Switch: React.FC<SwitchProps>;

// InputNumber
interface InputNumberProps<T = ValueType> {
  addonAfter?: React.ReactNode;
  addonBefore?: React.ReactNode;
  autoFocus?: boolean;
  bordered?: boolean;
  changeOnBlur?: boolean;
  changeOnWheel?: boolean;
  controls?: boolean | { upIcon?: React.ReactNode; downIcon?: React.ReactNode };
  decimalSeparator?: string;
  defaultValue?: T;
  disabled?: boolean;
  formatter?: (value: T | undefined, info: { userTyping: boolean; input: string }) => string;
  keyboard?: boolean;
  max?: T;
  min?: T;
  parser?: (displayValue: string | undefined) => T;
  placeholder?: string;
  precision?: number;
  readOnly?: boolean;
  size?: SizeType;
  status?: "error" | "warning";
  step?: T;
  stringMode?: boolean;
  value?: T;
  variant?: "outlined" | "borderless" | "filled";
  onChange?: (value: T | null) => void;
  onPressEnter?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
  onStep?: (value: T, info: { offset: T; type: "up" | "down" }) => void;
}

declare const InputNumber: React.FC<InputNumberProps>;

AutoComplete Component

Search input with automatic completion suggestions based on user input.

interface AutoCompleteProps<T = any> {
  allowClear?: boolean;
  autoFocus?: boolean;
  backfill?: boolean;
  children?: React.ReactElement<OptionProps> | Array<React.ReactElement<OptionProps>>;
  defaultActiveFirstOption?: boolean;
  defaultOpen?: boolean;
  defaultValue?: string;
  disabled?: boolean;
  filterOption?: boolean | ((inputValue: string, option?: OptionProps) => boolean);
  getPopupContainer?: (triggerNode: Element) => HTMLElement;
  notFoundContent?: React.ReactNode;
  open?: boolean;
  options?: OptionType[];
  placeholder?: string;
  size?: SizeType;
  status?: "error" | "warning";
  value?: string;
  variant?: "outlined" | "borderless" | "filled";
  onChange?: (value: string) => void;
  onDropdownVisibleChange?: (open: boolean) => void;
  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
  onSearch?: (value: string) => void;
  onSelect?: (value: string, option: OptionType) => void;
}

declare const AutoComplete: React.FC<AutoCompleteProps>;

Usage Examples:

import { AutoComplete } from "antd";

// Basic autocomplete with predefined options
const options = [
  { value: "Burns Bay Road" },
  { value: "Downing Street" },
  { value: "Wall Street" },
];

<AutoComplete
  options={options}
  placeholder="Type to search"
  onChange={(value) => console.log("Selected:", value)}
  onSelect={(value) => console.log("On Select:", value)}
/>

// Dynamic search with filtering
const [searchOptions, setSearchOptions] = useState([]);

const handleSearch = (value: string) => {
  const filtered = allOptions.filter(option => 
    option.label.toLowerCase().includes(value.toLowerCase())
  );
  setSearchOptions(filtered);
};

<AutoComplete
  options={searchOptions}
  onSearch={handleSearch}
  placeholder="Search for items"
/>

Cascader Component

Cascade selection component for hierarchical data structures.

interface CascaderProps<DataNodeType = DefaultOptionType> {
  allowClear?: boolean;
  autoFocus?: boolean;
  bordered?: boolean;
  changeOnSelect?: boolean;
  className?: string;
  defaultValue?: (string | number)[];
  disabled?: boolean | ((option: DataNodeType, level: number) => boolean);
  displayRender?: (labels: string[], selectedOptions?: DataNodeType[]) => React.ReactNode;
  dropdownRender?: (menus: React.ReactNode) => React.ReactNode;
  expandTrigger?: "click" | "hover";
  fieldNames?: FieldNames;
  getPopupContainer?: (triggerNode: Element) => HTMLElement;
  loadData?: (selectedOptions?: DataNodeType[]) => void;
  multiple?: boolean;
  notFoundContent?: React.ReactNode;
  open?: boolean;
  options?: DataNodeType[];
  placeholder?: string;
  placement?: "bottomLeft" | "bottomRight" | "topLeft" | "topRight";
  showSearch?: boolean | ShowSearchType<DataNodeType>;
  size?: SizeType;
  status?: "error" | "warning";
  suffixIcon?: React.ReactNode;
  value?: (string | number)[];
  variant?: "outlined" | "borderless" | "filled";
  onChange?: (value: (string | number)[], selectedOptions?: DataNodeType[]) => void;
  onDropdownVisibleChange?: (open: boolean) => void;
}

interface DefaultOptionType {
  value?: string | number;
  label?: React.ReactNode;
  children?: DefaultOptionType[];
  disabled?: boolean;
}

declare const Cascader: React.FC<CascaderProps>;

Usage Examples:

import { Cascader } from "antd";

// Basic cascader with hierarchical options
const options = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          { value: 'xihu', label: 'West Lake' },
          { value: 'xiasha', label: 'Xiasha' },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          { value: 'zhonghuamen', label: 'Zhong Hua Men' },
        ],
      },
    ],
  },
];

<Cascader
  options={options}
  placeholder="Please select"
  onChange={(value) => console.log(value)}
/>

// Multiple selection cascader
<Cascader
  options={options}
  multiple
  maxTagCount="responsive"
  placeholder="Select multiple"
  onChange={(value) => console.log('Selected:', value)}
/>

ColorPicker Component

Color selection component with various color format support.

interface ColorPickerProps {
  allowClear?: boolean;
  arrow?: boolean | { pointAtCenter: boolean };
  children?: React.ReactNode;
  defaultValue?: string | Color;
  disabled?: boolean;
  disabledAlpha?: boolean;
  format?: "hex" | "hsb" | "rgb";
  open?: boolean;
  placement?: "top" | "topLeft" | "topRight" | "bottom" | "bottomLeft" | "bottomRight";
  presets?: { label: React.ReactNode; colors: (string | Color)[] }[];
  showText?: boolean | ((color: Color) => React.ReactNode);
  size?: SizeType;
  trigger?: "click" | "hover";
  value?: string | Color;
  onChange?: (value: Color, hex: string) => void;
  onChangeComplete?: (value: Color) => void;
  onFormatChange?: (format: "hex" | "hsb" | "rgb") => void;
  onOpenChange?: (open: boolean) => void;
}

interface Color {
  toHex(): string;
  toHsb(): { h: number; s: number; b: number; a: number };
  toRgb(): { r: number; g: number; b: number; a: number };
}

declare const ColorPicker: React.FC<ColorPickerProps>;

### Tree Component

Tree view component for hierarchical data representation and selection.

```typescript { .api }
interface TreeProps<T = DataNode> {
  allowDrop?: (info: AntTreeNodeDropEvent) => boolean;
  autoExpandParent?: boolean;
  blockNode?: boolean;
  checkable?: boolean;
  checkedKeys?: React.Key[] | { checked: React.Key[]; halfChecked: React.Key[] };
  checkStrictly?: boolean;
  className?: string;
  defaultCheckedKeys?: React.Key[];
  defaultExpandAll?: boolean;
  defaultExpandedKeys?: React.Key[];
  defaultExpandParent?: boolean;
  defaultSelectedKeys?: React.Key[];
  disabled?: boolean;
  draggable?: boolean | ((node: DataNode) => boolean);
  expandedKeys?: React.Key[];
  fieldNames?: { title?: string; key?: string; children?: string };
  filterTreeNode?: (node: DataNode) => boolean;
  height?: number;
  icon?: React.ReactNode | ((props: AntTreeNodeProps) => React.ReactNode);
  loadData?: (node: EventDataNode<DataNode>) => Promise<void>;
  loadedKeys?: React.Key[];
  multiple?: boolean;
  rootStyle?: React.CSSProperties;
  selectable?: boolean;
  selectedKeys?: React.Key[];
  showIcon?: boolean;
  showLine?: boolean | { showLeafIcon: boolean };
  switcherIcon?: React.ReactNode | ((props: AntTreeNodeProps) => React.ReactNode);
  titleRender?: (nodeData: DataNode) => React.ReactNode;
  treeData?: DataNode[];
  virtual?: boolean;
  onCheck?: (checked: { checked: React.Key[]; halfChecked: React.Key[] } | React.Key[], info: CheckInfo) => void;
  onDragEnd?: (info: AntTreeNodeDragEndEvent) => void;
  onDragEnter?: (info: AntTreeNodeDragEnterEvent) => void;
  onDragLeave?: (info: AntTreeNodeDragLeaveEvent) => void;
  onDragOver?: (info: AntTreeNodeDragOverEvent) => void;
  onDragStart?: (info: AntTreeNodeDragStartEvent) => void;
  onDrop?: (info: AntTreeNodeDropEvent) => void;
  onExpand?: (expandedKeys: React.Key[], info: { node: EventDataNode<DataNode>; expanded: boolean }) => void;
  onLoad?: (loadedKeys: React.Key[], info: { event: "load"; node: EventDataNode<DataNode> }) => void;
  onRightClick?: (info: { event: React.MouseEvent; node: EventDataNode<DataNode> }) => void;
  onSelect?: (selectedKeys: React.Key[], info: { event: "select"; selected: boolean; node: EventDataNode<DataNode>; selectedNodes: DataNode[] }) => void;
}

interface DataNode {
  key: React.Key;
  title?: React.ReactNode | ((data: DataNode) => React.ReactNode);
  children?: DataNode[];
  disabled?: boolean;
  disableCheckbox?: boolean;
  icon?: React.ReactNode | ((props: AntTreeNodeProps) => React.ReactNode);
  isLeaf?: boolean;
  selectable?: boolean;
  switcherIcon?: React.ReactNode | ((props: AntTreeNodeProps) => React.ReactNode);
  className?: string;
  style?: React.CSSProperties;
  [key: string]: any;
}

declare const Tree: React.FC<TreeProps>;

TreeSelect Component

Tree selection component combining tree and select functionalities.

interface TreeSelectProps<T = DefaultOptionType> {
  allowClear?: boolean;
  autoClearSearchValue?: boolean;
  bordered?: boolean;
  className?: string;
  defaultValue?: string | string[] | number | number[] | LabeledValue | LabeledValue[];
  disabled?: boolean;
  dropdownClassName?: string;
  dropdownMatchSelectWidth?: boolean | number;
  dropdownRender?: (originNode: React.ReactNode, props: any) => React.ReactNode;
  dropdownStyle?: React.CSSProperties;
  fieldNames?: FieldNames;
  filterTreeNode?: boolean | ((inputValue: string, treeNode: DefaultOptionType) => boolean);
  getPopupContainer?: (triggerNode: Element) => HTMLElement;
  labelInValue?: boolean;
  listHeight?: number;
  loadData?: (node: LegacyDataNode) => Promise<void>;
  maxTagCount?: number | "responsive";
  maxTagPlaceholder?: React.ReactNode | ((omittedValues: (string | number | LabeledValue)[]) => React.ReactNode);
  multiple?: boolean;
  notFoundContent?: React.ReactNode;
  placeholder?: string;
  placement?: SelectCommonPlacement;
  searchValue?: string;
  showArrow?: boolean;
  showCheckedStrategy?: "SHOW_ALL" | "SHOW_PARENT" | "SHOW_CHILD";
  showSearch?: boolean;
  size?: SizeType;
  status?: "error" | "warning";
  suffixIcon?: React.ReactNode;
  switcherIcon?: React.ReactNode | ((props: AntTreeNodeProps) => React.ReactNode);
  tagRender?: (props: CustomTagProps) => React.ReactElement;
  treeCheckable?: boolean;
  treeCheckStrictly?: boolean;
  treeData?: TreeSelectDataNode[];
  treeDataSimpleMode?: boolean | SimpleModeConfig;
  treeDefaultExpandAll?: boolean;
  treeDefaultExpandedKeys?: React.Key[];
  treeExpandAction?: "click" | "doubleClick" | false;
  treeExpandedKeys?: React.Key[];
  treeIcon?: boolean;
  treeLine?: boolean;
  treeLoadedKeys?: React.Key[];
  treeNodeFilterProp?: string;
  treeNodeLabelProp?: string;
  value?: string | string[] | number | number[] | LabeledValue | LabeledValue[];
  variant?: "outlined" | "borderless" | "filled";
  virtual?: boolean;
  onChange?: (value: any, label: any, extra: any) => void;
  onDropdownVisibleChange?: (open: boolean) => void;
  onSearch?: (value: string) => void;
  onSelect?: (value: any, node: DefaultOptionType, extra: any) => void;
  onTreeExpand?: (expandedKeys: React.Key[]) => void;
}

declare const TreeSelect: React.FC<TreeSelectProps>;

Version

Tile

Files

data-entry.md.css-3qkkll{font-size:var(--chakra-font-sizes-sm);font-weight:var(--chakra-font-weights-normal);color:var(--chakra-colors-gray-300);}docs/

Data Entry Components

Capabilities

Input Components

Select Components

Form Components

Date and Time Components

Other Input Components

AutoComplete Component

Cascader Component

ColorPicker Component

TreeSelect Component

data-entry.mddocs/