@tatamicks/select

A select box plugin for Document Editor.

Features

- Select values from dropdown options
- Suitable for form inputs, category selection, etc.
- Customizable options
- Background color customization support
- Supports font styles, alignment, and validation

Installation

``bash
npm install @tatamicks/select @tatamicks/core
`

Usage

`typescript
import { SelectPlugin } from '@tatamicks/select';

// Register plugin to DocumentEditor
editor.registerPlugin(SelectPlugin);
`

Note: Styles are automatically injected when you import the plugin. No need to manually import CSS files.

Properties

$3

- options (SelectOption[]): Array of selectable options
- label: Display name
- value: Internal value
- defaultOption (string | undefined): Value of the default selected option
- backgroundColor (string | undefined): Background color of the select box (overrides block background color)

$3

- placeholder (string): Placeholder text
- fontSize (Dimension): Font size
- color (string): Font color
- fontWeight (boolean): Bold text
- italic (boolean): Italic text
- justifyContent (HorizontalAlign): Horizontal alignment
- alignItems (VerticalAlign): Vertical alignment
- padding: Padding settings
- required (boolean): Required field
- pattern (string): Validation pattern

Value Type

`typescript
type SelectValue = string | null;
`

Example

`typescript
const selectBlock = {
id: "select-1",
kind: "select",
props: {
options: [
{ label: "Option 1", value: "opt1" },
{ label: "Option 2", value: "opt2" },
{ label: "Option 3", value: "opt3" },
],
placeholder: "Please select",
backgroundColor: "#f0f0f0",
required: true,
},
value: null,
// ... other block properties
};
``

License

MIT © 2025 yonpachi (株式会社torchi) – yatch

Links

- GitHub Repository
- Documentation
- Issues
- 株式会社torchi