<script>
	export let label;
	export let value;
	export let id;

	function capitalize() {
		value = value.charAt(0).toUpperCase() + value.slice(1);
		console.log(`element: ${value}`);
	}
</script>

<label class="label" for={id}>{label}</label>
<input bind:value on:change={capitalize} {id} type="text" />

<style>
	.label {
		border: 2px solid #555;
		background-color: gray;
		border-radius: 8px;
		padding: 2px;
		width: fit-content;
	}

	input {
		font-size: 1.2rem;
		border-radius: 6px;
		margin-left: 0.1rem;
		margin-right: 0.1rem;
		padding-top: 2px;
		padding-bottom: 2px;
		width: fit-content;
	}
</style>
