SoybeanUI

https://ui.soybeanjs.cn
Admin
SoybeanUI is an elegant, modern, accessible, and high-quality UI component library designed for Vue...
Tokens:240,927
Snippets:1,389
Trust Score:5.4
Update:4 months ago
Show doc for...
Tokens:
Raw
### Install SBean CLI

Source: https://ui.soybeanjs.cn/sbean

Install the SBean CLI as a development dependency using pnpm.

```bash
pnpm add -D sbean
```

--------------------------------

### SBean Configuration File Example

Source: https://ui.soybeanjs.cn/sbean

Example of the sbean.json file which stores project configuration for SoybeanUI.

```json
{
  "style": "soybean",
  "isMonorepo": false,
  "iconLibrary": "lucide",
  "uno": {
    "base": "zinc",
    "primary": "indigo",
    "feedback": "classic",
    "size": "md",
    "radius": "md"
  },
  "font": {
    "sans": "inter",
    "heading": "inherit"
  },
  "menu": {
    "accent": "subtle",
    "color": "default"
  },
  "uiDir": "src/ui"
}
```

--------------------------------

### Install Headless Library

Source: https://ui.soybeanjs.cn/overview/quick-start

Install the Headless library if you plan to build your own design system.

```bash
pnpm add @soybeanjs/headless
```

--------------------------------

### Install SoybeanUI with npm

Source: https://ui.soybeanjs.cn/overview/quick-start

Use this command to install the styled UI library with npm.

```bash
npm install @soybeanjs/ui
```

--------------------------------

### Install SoybeanUI with yarn

Source: https://ui.soybeanjs.cn/overview/quick-start

Use this command to install the styled UI library with yarn.

```bash
yarn add @soybeanjs/ui
```

--------------------------------

### Install Auto-Import Dependencies

Source: https://ui.soybeanjs.cn/overview/quick-start

Install unplugin-vue-components to enable automatic component imports.

```bash
pnpm add -D unplugin-vue-components
```

--------------------------------

### Basic SoybeanUI Example

Source: https://ui.soybeanjs.cn/overview/quick-start

Demonstrates the usage of SButton, SInput, and SCard components. Ensure you have imported the necessary styles.

```vue
<template>
  <div class="p-4 space-y-4">
    <h1 class="text-2xl font-bold">SoybeanUI Example</h1>

    <SButton color="primary" @click="handleClick">Click</SButton>

    <SInput v-model="inputValue" placeholder="Enter text" class="w-64" />

    <SCard>
      <template #header>
        <h3>Card title</h3>
      </template>
      <p>This is the card content area.</p>
      <template #footer>
        <SButton size="small">Action</SButton>
      </template>
    </SCard>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const inputValue = ref('');

function handleClick() {
  alert('Button clicked!');
}
</script>
```

--------------------------------

### Install SoybeanUI Skills Globally

Source: https://ui.soybeanjs.cn/overview/skills

Install the SoybeanUI skills globally using the CLI to make them available across all your projects.

```bash
npx skills add soybeanjs/soybean-ui/skills --global
```

--------------------------------

### Headless Composition Example

Source: https://ui.soybeanjs.cn/components/watermark

Example demonstrating how to use headless primitives `WatermarkRoot`, `WatermarkOverlay`, and `provideWatermarkUi` for custom watermark composition.

```APIDOC
## Headless Composition

When the default root/overlay structure is enough, import `WatermarkCompact` from `@soybeanjs/headless/watermark`. If you need separate control over the root and overlay elements, compose the headless primitives directly:

```vue
<script setup lang="ts">
import { computed } from 'vue';
import { WatermarkOverlay, WatermarkRoot, provideWatermarkUi } from '@soybeanjs/headless';

const ui = computed(() => ({
  root: 'relative',
  overlay: 'absolute inset-0 pointer-events-none bg-repeat'
}));

provideWatermarkUi(ui);
</script>

<template>
  <WatermarkRoot content="CONFIDENTIAL" :rotate="-22">
    <slot />
    <WatermarkOverlay />
  </WatermarkRoot>
</template>
```
```

--------------------------------

### Component Import Examples

Source: https://ui.soybeanjs.cn/sbean

Demonstrates how to import SBean components and styles using the configured '#ui' TypeScript path alias. Ensure the alias is correctly set up in tsconfig.json.

```typescript
import { SButton } from '#ui/components/button';
import { buttonVariants } from '#ui/styles/button';
```

--------------------------------

### Install SoybeanUI Skills CLI

Source: https://ui.soybeanjs.cn/overview/skills

Use the 'skills' CLI to add the SoybeanUI skills package. This installs guidance for both styled and headless components.

```bash
npx skills add soybeanjs/soybean-ui/skills
```

--------------------------------

### Basic Function Example

Source: https://ui.soybeanjs.cn/about

A simple JavaScript function demonstrating variable declaration and console logging. This is a basic example function.

```javascript
function vitesse() {
  const foo = 'bar';
  console.log(foo);
}
```

--------------------------------

### Install SoybeanUI Styled Skill for Claude Code

Source: https://ui.soybeanjs.cn/overview/skills

Install the SoybeanUI styled skill directly from the GitHub directory for Claude Code.

```bash
claude skill add https://github.com/soybeanjs/soybean-ui/tree/main/skills/skills/soybean-ui
```

--------------------------------

### Install SoybeanUI Headless Skill for Claude Code

Source: https://ui.soybeanjs.cn/overview/skills

Install the SoybeanUI headless skill directly from the GitHub directory for Claude Code.

```bash
claude skill add https://github.com/soybeanjs/soybean-ui/tree/main/skills/skills/soybean-headless
```

--------------------------------

### Single Package Project Structure

Source: https://ui.soybeanjs.cn/sbean

Illustrates the typical project structure for a single-package setup using SoybeanUI.

```text
project/
├── src/
│   └── ui/           ← component output (uiDir)
│       ├── components/
│       ├── styles/
│       ├── theme/
│       ├── constants/
│       ├── resolver/
│       └── nuxt/
sbean.json
tsconfig.json
uno.config.ts
```

--------------------------------

### Headless Affix Composition Example

Source: https://ui.soybeanjs.cn/components/affix

Demonstrates how to compose Affix primitives for custom styling and behavior. It uses AffixRoot, AffixPlaceholder, and AffixContent, providing custom UI classes.

```vue
<script setup lang="ts">
import { computed } from 'vue';
import { AffixContent, AffixPlaceholder, AffixRoot, provideAffixUi } from '@soybeanjs/headless';

const ui = computed(() => ({
  content: 'data-[state=fixed]:z-50'
}));

provideAffixUi(ui);
</script>

<template>
  <AffixRoot :offset-top="24">
    <AffixPlaceholder />
    <AffixContent>
      <button type="button">Back to top</button>
    </AffixContent>
  </AffixRoot>
</template>
```

--------------------------------

### Install npm Package

Source: https://ui.soybeanjs.cn/overview/installation

Use this command to add the SoybeanUI npm package as a project dependency. This is recommended for most projects.

```bash
pnpm add @soybeanjs/ui
```

--------------------------------

### Use Components with Auto-Import

Source: https://ui.soybeanjs.cn/overview/quick-start

Example of using SoybeanUI components directly in the template after enabling auto-import.

```vue
<template>
  <SButton>Click me</SButton>
  <SInput placeholder="Enter text" />
  <SCard>
    <p>This is a card.</p>
  </SCard>
</template>
```

--------------------------------

### Use Button Component (npm)

Source: https://ui.soybeanjs.cn/overview/installation

Import and use the SButton component directly from the @soybeanjs/ui package. This example shows basic usage within a Vue component.

```vue
<script setup lang="ts">
import { SButton } from '@soybeanjs/ui';
</script>

<template>
  <SButton>Click me</SButton>
</template>
```

--------------------------------

### Install SoybeanUI Skills for Specific Agent

Source: https://ui.soybeanjs.cn/overview/skills

Target a specific AI agent when installing the SoybeanUI skills using the CLI. This ensures the skills are optimized for that agent's context.

```bash
npx skills add soybeanjs/soybean-ui/skills --agent cursor
```

```bash
npx skills add soybeanjs/soybean-ui/skills --agent claude-code
```

--------------------------------

### Initialize CLI

Source: https://ui.soybeanjs.cn/overview/installation

Run this command to initialize the sbean CLI in your project. It sets up the sbean.json configuration file and configures UnoCSS.

```bash
npx sbean init
```

--------------------------------

### SBean Init Command Usage

Source: https://ui.soybeanjs.cn/sbean

The sbean init command initializes a new SoybeanUI project or adds configuration to an existing one. It accepts various options to customize the initialization process.

```bash
sbean init [options]
```

--------------------------------

### Import Styles (npm)

Source: https://ui.soybeanjs.cn/overview/installation

Import the global styles for SoybeanUI components after installing the npm package. This ensures all necessary CSS is applied.

```typescript
import '@soybeanjs/ui/styles.css';
```

--------------------------------

### Imperative Dialog API Usage

Source: https://ui.soybeanjs.cn/components/dialog

Demonstrates how to programmatically open a warning dialog using the imperative API. Ensure SDialogProvider is mounted near your app root.

```vue
<script setup lang="ts">
import { h } from 'vue';
import { SButton, SDialogProvider, dialog } from '@soybeanjs/ui';

function openWarningDialog() {
  dialog.warning('Delete Project', {
    description: 'This action cannot be undone.',
    content: h('div', 'Please confirm before continuing.'),
    confirmText: 'Delete'
  });
}
</script>

<template>
  <SDialogProvider />

  <SButton color="warning" @click="openWarningDialog">Open Dialog</SButton>
</template>
```

--------------------------------

### Monorepo Directory Structure

Source: https://ui.soybeanjs.cn/sbean

Illustrates the typical directory layout for a SBean monorepo using pnpm workspaces. The 'packages/ui' directory contains the component output.

```text
project/
├── packages/
│   └── ui/           ← component output (uiDir)
│       ├── components/
│       ├── styles/
│       ├── theme/
│       ├── constants/
│       ├── resolver/
│       └── nuxt/
├── sbean.json
├── tsconfig.json
├── uno.config.ts
└── pnpm-workspace.yaml
```

--------------------------------

### SBean Info Command Usage

Source: https://ui.soybeanjs.cn/sbean

The sbean info command shows project configuration and available preset values. It can output the information in JSON format.

```bash
sbean info [options]
```

--------------------------------

### DateRangeField

Source: https://ui.soybeanjs.cn/components/date-range-field

The DateRangeField component provides a segmented input for selecting a start and end date. It accepts various props to customize its appearance and behavior, and emits events when the date range or its components change.

```APIDOC
## DateRangeField

### Description
A segmented date range input for selecting a start and end date, submitting native form values for both.

### Props
- `class` (string | false | Record<string, any> | ClassValue[] | null): Additional class names applied to the root element. (optional)
- `size` (ThemeSize): Visual size of the component. (optional)
- `ui` (Partial<DateRangeFieldUi>): Per-slot class overrides for the component. (optional)
- `inputProps` (DateRangeFieldInputProps): Properties forwarded to the input element. (optional)
- `separator` (string): Separator between the date inputs. (optional)
- `defaultValue` (DateRange): Default value for the date range. (optional)
- `modelValue` (DateRange): Current model value for the date range. (optional)
- `startName` (string): Name attribute for the start date input. (optional)
- `endName` (string): Name attribute for the end date input. (optional)
- `disabled` (boolean): Whether the component is disabled. (optional)
- `asChild` (boolean): Change the default rendered element to the one passed as a child. (optional)
- `as` (AsTag | Component): The element or component to render as. (default: 'div', optional)
- `dir` (Direction): Reading direction of the component. (optional)
- `id` (string): Id of the component. (optional)
- `placeholder` (DateValue): Placeholder for the date input. (optional)
- `name` (string): The name of the field. Submitted with its owning form as part of a name/value pair. (optional)
- `required` (boolean): Indicates that the user must set the value before the owning form can be submitted. (optional)
- `readonly` (boolean): Whether the component is readonly. (optional)
- `step` (DateStep): The step interval for date changes. (optional)
- `locale` (string): Locale for date formatting. (optional)
- `defaultPlaceholder` (DateValue): Default placeholder value. (optional)
- `maxValue` (DateValue): Maximum allowed date. (optional)
- `minValue` (DateValue): Minimum allowed date. (optional)
- `isDateUnavailable` (DateMatcher): Function to determine if a date is unavailable. (optional)
- `granularity` (Granularity): The granularity of the date selection (e.g., 'day', 'month'). (optional)
- `hourCycle` (12 | 24): The hour cycle to use for time display. (optional)
- `hideTimeZone` (boolean): Whether to hide the time zone display. (optional)

### Emits
- `update:modelValue` (range: DateRange): Emitted when the model value changes.
- `update:placeholder` (date: DateValue): Emitted when the placeholder value changes.
- `update:startValue` (date: DateValue | undefined): Emitted when the start value changes.
- `update:endValue` (date: DateValue | undefined): Emitted when the end value changes.

### Slots
- `leading`: Custom content for the leading slot.
- `trailing`: Custom content for the trailing slot.
- `separator`: Custom content for the separator slot.

### Slot Props
- `startSegments` (DateFieldSegment[]): Start segments used by the component context.
- `endSegments` (DateFieldSegment[]): End segments used by the component context.
- `modelValue` (DateRange): Current model value.
- `isInvalid` (boolean): Whether the date range is invalid.
```

--------------------------------

### SoybeanHeadless Skill Entry Markdown

Source: https://ui.soybeanjs.cn/overview/skills

This is the entry point markdown file for the SoybeanHeadless skill, useful for tools that reference GitHub-hosted skill folders.

```text
https://github.com/soybeanjs/soybean-ui/tree/main/skills/skills/soybean-headless/SKILL.md
```

--------------------------------

### Basic SConfigProvider Usage

Source: https://ui.soybeanjs.cn/components/config-provider

Wrap your application root with SConfigProvider to set global configurations like size, theme, and icon settings.

```vue
<script setup lang="ts">
import { SConfigProvider } from '@soybeanjs/ui';
</script>

<template>
  <SConfigProvider
    size="md"
    :theme="{
      base: 'gray',
      primary: 'violet',
      feedback: 'modern',
      radius: '0.625rem'
    }"
    :iconify="{ width: '1.25em', height: '1.25em' }"
    dir="ltr"
  >
    <App />
  </SConfigProvider>
</template>
```

--------------------------------

### Select Component Props and Emits

Source: https://ui.soybeanjs.cn/components/select

This section details the available properties (props) for configuring the Select component and the events it emits.

```APIDOC
## Select Component API

### Description
Provides a dropdown interface for users to select one or more options from a list. It supports various customization options through props and emits events to communicate user interactions.

### Props

- `class` (string | false | Record<string, any> | ClassValue[] | null): Optional. The class of the select trigger.
- `ui` (Partial<SelectUi>): Optional. Per-slot class overrides for the component.
- `size` (ThemeSize): Optional. Visual size of the component.
- `items` (SelectOptionData<T>[]): Required. Items rendered by the component.
- `showArrow` (boolean): Optional. Whether to show an arrow.
- `triggerProps` (SelectTriggerProps): Optional. Properties forwarded to the trigger element.
- `triggerIconProps` (SelectTriggerIconProps): Optional. Properties forwarded to the trigger icon element.
- `placeholder` (string): Optional. Placeholder text.
- `valueProps` (SelectValueProps): Optional. Properties forwarded to the value element.
- `portalProps` (SelectPortalProps): Optional. Properties forwarded to the portal element.
- `contentProps` (SelectContentProps): Optional. Properties forwarded to the content element.
- `placement` (import("@/index").Placement): Optional. The placement of the dropdown.
- `popupProps` (SelectPopupProps): Optional. Properties forwarded to the popup element.
- `viewportProps` (SelectViewportProps): Optional. Properties forwarded to the viewport element.
- `scrollDownButtonProps` (SelectScrollDownButtonProps): Optional. Properties forwarded to the scroll down button element.
- `scrollUpButtonProps` (SelectScrollUpButtonProps): Optional. Properties forwarded to the scroll up button element.
- `groupProps` (SelectGroupProps): Optional. Properties forwarded to the group element.
- `groupLabelProps` (SelectGroupLabelProps): Optional. Properties forwarded to the group label element.
- `itemProps` (SelectItemProps): Optional. Properties forwarded to the item element.
- `itemTextProps` (SelectItemTextProps): Optional. Properties forwarded to the item text element.
- `itemIndicatorProps` (SelectItemIndicatorProps): Optional. Properties forwarded to the item indicator element.
- `separatorProps` (SelectSeparatorProps): Optional. Properties forwarded to the separator element.
- `arrowProps` (PopperArrowProps): Optional. Properties forwarded to the arrow element.
- `open` (boolean): Optional. The controlled open state of the Select. Can be bind as `v-model:open`.
- `defaultOpen` (boolean): Optional. The open state of the select when it is initially rendered.
- `dir` (Direction): Optional. The reading direction of the combobox. Inherits globally or assumes LTR.
- `autocomplete` (string): Optional. Native html input `autocomplete` attribute.
- `disabled` (boolean): Optional. When `true`, prevents user interaction.
- `modelValue` ((M extends true ? T[] : T)): Optional. The controlled value of the selected item(s). Use with `v-model`.
- `defaultValue` ((M extends true ? T[] : T)): Optional. The default value of the selected item(s).
- `multiple` (M): Optional. Determines whether single or multiple items can be selected.
- `clearable` (boolean): Optional. Whether selected item can be cleared when `multiple` is false.
- `selectionBehavior` (SelectionBehavior): Optional. Default `'toggle'`. How multiple selection should behave.
- `name` (string): Optional. The name of the field for form submission.
- `required` (boolean): Optional. Indicates that the user must set the value before form submission.

### Emits

- `update:modelValue` ([value: M extends true ? T[] : T]): Emitted when the selected value changes.
- `update:open` ([value: boolean]): Emitted when the open state of the select changes.
- `closeAutoFocus` ([event: Event]): Emitted when close auto focus occurs.
- `escapeKeyDown` ([event: KeyboardEvent]): Emitted when the escape key is pressed. Can be prevented.
- `pointerDownOutside` ([event: PointerDownOutsideEvent]): Emitted when a `pointerdown` event happens outside the `DismissableLayer`. Can be prevented.
- `select` ([event: SelectItemEvent<T>]): Emitted when an item is selected. Can be prevented by calling `event.preventDefault`.
```

--------------------------------

### Configure Global Theme with SConfigProvider

Source: https://ui.soybeanjs.cn/overview/quick-start

Use SConfigProvider to configure the global theme and size for SoybeanUI components.

```vue
<script setup>
import { SConfigProvider } from '@soybeanjs/ui';

const themeConfig = {
  theme: {
    base: 'gray',
    primary: 'indigo',
    feedback: 'classic',
    radius: '0.625rem'
  },
  size: 'md'
};
</script>

<template>
  <SConfigProvider :theme="themeConfig">
    <YourApp />
  </SConfigProvider>
</template>
```

--------------------------------

### Add Button Component (CLI)

Source: https://ui.soybeanjs.cn/overview/installation

Use this command to copy the source files for the button component directly into your project's src/ui directory. This allows for full source code control.

```bash
npx sbean add button
```

--------------------------------

### SoybeanUI Skill Entry Markdown

Source: https://ui.soybeanjs.cn/overview/skills

This is the entry point markdown file for the SoybeanUI skill, useful for tools that reference GitHub-hosted skill folders.

```text
https://github.com/soybeanjs/soybean-ui/tree/main/skills/skills/soybean-ui/SKILL.md
```

--------------------------------

### RTL Layout Configuration

Source: https://ui.soybeanjs.cn/components/config-provider

Use the `dir` prop on SConfigProvider to switch supported components between left-to-right and right-to-left layouts.

```vue
<template>
  <SConfigProvider dir="rtl">
    <App />
  </SConfigProvider>
</template>
```

--------------------------------

### SelectCompact Component

Source: https://ui.soybeanjs.cn/components/select

Documentation for the SelectCompact component, including its props and emits.

```APIDOC
## SelectCompact Component

### Description
Provides a customizable select input component for selecting single or multiple options.

### Props
- `items` (SelectOptionData<T>[]): Items rendered by the component. (required)
- `showArrow` (boolean): Whether to show an arrow. (optional)
- `triggerProps` (SelectTriggerProps): Properties forwarded to the trigger element. (optional)
- `triggerIconProps` (SelectTriggerIconProps): Properties forwarded to the trigger icon element. (optional)
- `placeholder` (string): Placeholder text. (optional)
- `valueProps` (SelectValueProps): Properties forwarded to the value element. (optional)
- `portalProps` (SelectPortalProps): Properties forwarded to the portal element. (optional)
- `contentProps` (SelectContentProps): Properties forwarded to the content element. (optional)
- `placement` (import("@/index").Placement): Placement of the select dropdown. (optional)
- `popupProps` (SelectPopupProps): Properties forwarded to the popup element. (optional)
- `viewportProps` (SelectViewportProps): Properties forwarded to the viewport element. (optional)
- `scrollDownButtonProps` (SelectScrollDownButtonProps): Properties forwarded to the scroll down button element. (optional)
- `scrollUpButtonProps` (SelectScrollUpButtonProps): Properties forwarded to the scroll up button element. (optional)
- `groupProps` (SelectGroupProps): Properties forwarded to the group element. (optional)
- `groupLabelProps` (SelectGroupLabelProps): Properties forwarded to the group label element. (optional)
- `itemProps` (SelectItemProps): Properties forwarded to the item element. (optional)
- `itemTextProps` (SelectItemTextProps): Properties forwarded to the item text element. (optional)
- `itemIndicatorProps` (SelectItemIndicatorProps): Properties forwarded to the item indicator element. (optional)
- `separatorProps` (SelectSeparatorProps): Properties forwarded to the separator element. (optional)
- `arrowProps` (PopperArrowProps): Properties forwarded to the arrow element. (optional)
- `open` (boolean): The controlled open state of the Select. Can be bind as `v-model:open`. (optional)
- `defaultOpen` (boolean): The open state of the select when it is initially rendered. (optional)
- `dir` (Direction): The reading direction of the combobox. Inherits globally or assumes LTR. (optional)
- `autocomplete` (string): Native html input `autocomplete` attribute. (optional)
- `disabled` (boolean): Prevents user interaction. (optional)
- `modelValue` ((M extends true ? T[] : T)): The controlled value of the selected item(s). Can be bound with `v-model`. (optional)
- `defaultValue` ((M extends true ? T[] : T)): The default value of the selected item(s). (optional)
- `multiple` (M): Determines whether single or multiple items can be selected. Overwrites inferred type from `modelValue` and `defaultValue`. (optional)
- `clearable` (boolean): Whether selected item can be cleared when `multiple` is false. (optional)
- `selectionBehavior` (SelectionBehavior): How multiple selection should behave. (default: 'toggle', optional)
- `name` (string): The name of the field. Submitted with its owning form. (optional)
- `required` (boolean): Indicates that the user must set the value before form submission. (optional)

### Emits
- `update:modelValue` ([value: M extends true ? T[] : T]): Emitted when the selected value changes.
- `update:open` ([value: boolean]): Emitted when the open state of the context menu changes.
- `closeAutoFocus` ([event: Event]): Emitted when close auto focus occurs.
- `escapeKeyDown` ([event: KeyboardEvent]): Emitted when the escape key is down. Can be prevented.
- `pointerDownOutside` ([event: PointerDownOutsideEvent]): Emitted when a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented.
- `select` ([event: SelectItemEvent<T>]): Emitted when selecting an item. Can be prevented by calling `event.preventDefault()`.
```

--------------------------------

### SBean Template Command Usage

Source: https://ui.soybeanjs.cn/sbean

The sbean template command scaffolds a new project from a template. You can list available templates or specify an output directory.

```bash
sbean template [name] [options]
```

--------------------------------

### SBean Add Command Usage

Source: https://ui.soybeanjs.cn/sbean

The sbean add command is used to add components to your project. It supports options for skipping prompts, overwriting files, specifying paths, and more.

```bash
sbean add <component...> [options]
```

--------------------------------

### SBean Build Command Usage

Source: https://ui.soybeanjs.cn/sbean

The sbean build command generates registry JSON files from a registry.json manifest. It allows specifying an output directory.

```bash
sbean build [registry] [options]
```

--------------------------------

### InputRoot Component

Source: https://ui.soybeanjs.cn/components/input

Props and emits for the InputRoot component.

```APIDOC
## InputRoot Component

### Description
Represents the root element of the input component, handling core input functionalities and properties.

### Props
- `defaultValue` (string) - Optional - The default value of the input.
- `modelValue` (string) - Optional - The controlled value of the input.
- `disabled` (boolean) - Optional - When `true`, prevents the user from interacting with the input.
- `readonly` (boolean) - Optional - When `true`, the input is read-only.
- `rootProps` (BaseProps) - Optional - Properties forwarded to the root element.
- `name` (string) - Optional - The name of the field. Submitted with its owning form as part of a name/value pair.
- `required` (boolean) - Optional - When `true`, indicates that the user must set the value before the owning form can be submitted.
- `id` (string) - Optional - Id of the input element.
- `autofocus` (boolean) - Optional - When `true`, the input is auto-focused.
- `autocomplete` ('on' | 'off') - Optional - The autocomplete attribute of the input.
- `maxlength` (number) - Optional - The maximum number of characters allowed in the input.
- `minlength` (number) - Optional - The minimum number of characters allowed in the input.
- `pattern` (string) - Optional - The pattern attribute of the input.
- `placeholder` (string) - Optional - The placeholder of the input.
- `type` (InputTypeHTMLAttribute) - Optional - The type of the input element.

### Emits
- `update:modelValue` - Emitted when the model value changes. Parameters: `value: string`.
```
Tokens:
Raw