Textarea

The textarea is similar to the Text Field. However, it is used to render textareas, which are multiline areas where text can be written.

<script>
	import { Textarea } from '@makigas/genshi-svelte';
</script>

<Textarea
	label="Your bio"
	placeholder="Write your bio"
	helper="A bio helps your profile be more interesting." />

Monospace

Add the mono prop to render the textarea using monospaced fonts.

<Textarea mono label="Custom HTML code" />

Disabled and readonly

Add the disabled prop to your textarea to make it disabled.

<Textarea
	disabled
	label="User bio"
	value="CEO of the world"
	helper="You cannot change your bio right now" />

Similarly, you can use the readonly prop to make it readonly.

<Textarea
	readonly
	label="User bio"
	value="CEO of the world"
	helper="You cannot change your bio right now" />

Icons

You can use the iconBefore and iconAfter attributes to pass a Lucide component const to render it at the start or at the end of the field.

Validation

You can add the validation prop to mark the field as valid or invalid with either the "valid" or "invalid" string. Absence of this prop will mark the field as default.

Sizes

You can use the size prop to change the size of the component.

If you don’t want to use the default medium size, change it via the size parameter, which accepts one of the possible values in: xs sm md lg xl.