eink-ui

eink-ui

Web Components

Switch to CSS-only demos Theme: default Default Inverted High-contrast View Storybook

Text input

<eink-input> wraps a native <input> and applies the .eink-input class automatically. Attributes like type, placeholder, and disabled are forwarded to the inner element.

CSS-only
<input type="text" class="eink-input" placeholder="..." />
Web Component
<eink-input type="text" placeholder="..."></eink-input>
This field contains an error.

Textarea

<eink-textarea> wraps a native <textarea>.

Cannot edit this content.
Invalid content Content does not meet requirements.

Select

<eink-select> wraps a native <select>. Place <option> elements inside — they are moved into the generated select.

A selection is required.

Checkbox

<eink-checkbox> creates a styled checkbox. Text content placed inside becomes the label.

CSS-only
<input type="checkbox" class="eink-checkbox" id="cb" />
<label for="cb">Label</label>
Web Component
<eink-checkbox name="cb">Label</eink-checkbox>
Default checkbox
Checked checkbox
Disabled checkbox
Disabled & checked

Radio

<eink-radio> creates a styled radio button. Use the same name attribute to group them.

Choose a size
Small
Medium (selected)
Large
Extra large (disabled)

Complete form example

A full form using web components for all input types.

Full name is required.
We'll use this to send your confirmation. Enter a valid email address.
Maximum 200 characters.
This code was automatically applied and cannot be changed.
Notification preferences
Email notifications
SMS notifications
Push notifications (not available)
Notification frequency
Instant
Daily digest
Weekly summary
I accept the terms and conditions
You must accept the terms to continue.
Submit Reset