jb-textarea

simple textarea web component to input long text

• lightweight
• zero dependency
• advance validation with jb-validation module
• help you manage validation in easy way
• config auto height grow ability with max height
• web component so you can use it with any framework you need

Demo

storybook [codepen][https://codepen.io/javadbat/pen/poRZVXe]

using with JS frameworks

to use this component in react see jb-textarea/react;

installation and setup

npm i jb-textarea

<jb-textarea label="توضیحات" value="" message="متن زیر باکس"></jb-textarea>

get and set value

document.querySelector("jb-textarea").value;
// return inputted text
document.querySelector("jb-textarea").value = "salam";
set value to salam

set validation

jb-textarea use jb-validation inside to handle validation so for more information you can read it's documentation.
for simple usage you can set validation to your input:

//you have 2 ways: 
//1- set list directly 
    description.validation.list = [
        {
            validator: /.{3}/g,
            message: 'description must have 3 char at least'
        },
    //you can use function as a validator too
        {
            validator: (valueString)=>{return valueString == "hello"},
            message: 'you can only type hello in the box'
        },
    //you can also return string in validator if you want custom error message in some edge cases
        {
            validator: (valueString)=>{
               if(valueString.includes("*")){
                return 'you cant write * in your text'
               }
               return true;
            },
            message: 'default error when return false'
        },
    ];
//2- pass a function that returns the validation list so on each validation process we execute your callback function and get the needed validation list
const result = document.getElementByTagName('jb-textarea').validation.addValidationListGetter(getterFunction)

check validation

like any other jb design system you can access validation by validation property:

//access validation module
document.getElementByTagName('jb-textarea').validation
// check if input pass all the validations. showError is a boolean that determine your intent to show error to user on invalid status.
const result = document.getElementByTagName('jb-textarea').validation.checkValidity(showError)

events

document.querySelector("jb-textarea").addEventListener('change',func);
document.querySelector("jb-textarea").addEventListener('keydown',func);
document.querySelector("jb-textarea").addEventListener('keyup',func);
document.querySelector("jb-textarea").addEventListener('keypress',func);
document.querySelector("jb-textarea").addEventListener('input',func);
// custom Keyboard event that raise when user press enter (unlike jb-input this enter event raise after keypress because it could be cancelled with prevent default)
document.querySelector("jb-textarea").addEventListener('enter',func);

auto height grow

you can set autoHeight to true so when user type something and text overflow a textarea height component will grow by itself in boundary of --jb-textarea-min-height and --jb-textarea-max-height that you set by css variable

document.querySelector("jb-textarea").autoHeight = true;

the good point of set boundary with css variable is you can set different min or max base on device by CSS media queries.

set custom style

you have 2 way to customize style,

1. using selectors like:states or ::part selector

   jb-textarea::part(label){
   font-size: 2rem;
   }
   jb-textarea:states(invalid)::part(label){
   color:red;
   }

   we have label, textarea-box, textarea, message as a supported part in our component. you can also combine them with disabled, invalid states for different style in different states.

2. using css variable

add custom element in textarea box

in jb-textarea you can put icon or any other custom html DOM in textarea box. to doing so you just have to place custom DOM in jb-textarea tag and add slot="inline-start-section" or slot="inline-end-section" to place it before or after input field. example:

<jb-textarea>
    <div slot="inline-start-section">before</div>
    <div slot="inline-end-section">after</div>
</jb-textarea>

Other Related Docs:

• see jb-textarea/react if you want to use this component in react.

• see All JB Design system Component List for more components.

• use Contribution Guide if you want to contribute in this component.