An ivisible text input element for editable titles.
import React from 'react';
import { InvisibleTextField } from '@minddrop/ui';
export const InvisibleTextFieldDemo = () => (
<div style={{ display: 'flex', alignItems: 'center' }}>
<InvisibleTextField
label="Topic name"
size="title"
color="contrast"
placeholder="Untitled"
defaultValue="The book of tea"
/>
</div>
);
export default InvisibleTextFieldDemo;
Import the component from the @minddrop/ui package.
import { InvisibleTextField } from '@minddrop/ui';
export default (props) => {
return <InvisibleTextField size="title" {...props} />;
};
InvisibleTextFieldProps extends React.HTMLAttributes<HTMLInputElement>.
| Prop | Type | Default |
|---|---|---|
label* | string | |
placeholder* | string | |
size | 'tiny' | 'small' | 'regular' | 'large' | 'title' | regular |
color | 'regular' | 'light' | 'contrast' | 'contrast-light' | regular |
weight | 'light' | 'regular' | 'medium' | 'semibold' | 'bold' | 'heavy' | regular |
Applies the label prop as the aria-label.