InputGroup

<script lang="ts">
	import InputGroup from '@tcpsystems/ui/foundation/InputGroup';
	import Input from '@tcpsystems/ui/foundation/Input';
	import Field from '@tcpsystems/ui/foundation/Field';
	let domain = $state('studio.tcp.systems');
</script>

<Field label="Deployment domain">
	{#snippet control(props)}
		<InputGroup prefix="https://"><Input {...props} bind:value={domain} /></InputGroup>
	{/snippet}
</Field>

<script lang="ts">
	import InputGroup from '@tcpsystems/ui/foundation/InputGroup';
	import Input from '@tcpsystems/ui/foundation/Input';
	import Field from '@tcpsystems/ui/foundation/Field';
	import Button from '@tcpsystems/ui/foundation/Button';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	let budget = $state(120);
	let slug = $state('studio-production');
</script>

<Stack>
	<Field label="Monthly budget">
		{#snippet control(props)}<InputGroup suffix="USD"><Input {...props} type="number" bind:value={budget} /></InputGroup>{/snippet}
	</Field>
	<Field label="Project slug">
		{#snippet control(props)}
			<InputGroup>
				<Input {...props} bind:value={slug} />
				{#snippet end()}<Button onclick={() => slug = 'studio-production'}>Reset</Button>{/snippet}
			</InputGroup>
		{/snippet}
	</Field>
</Stack>

<script lang="ts">
	import InputGroup from '@tcpsystems/ui/foundation/InputGroup';
	import Input from '@tcpsystems/ui/foundation/Input';
	import Field from '@tcpsystems/ui/foundation/Field';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	let domain = $state('studio');
</script>

<Stack>
	<Field label="Managed domain">
		{#snippet control(props)}<InputGroup prefix="https://"><Input {...props} disabled value="ai.tcp.systems" /></InputGroup>{/snippet}
	</Field>
	<Field label="Custom domain" error={domain.includes('.') ? undefined : 'Enter a full domain name.'}>
		{#snippet control(props)}<InputGroup prefix="https://"><Input {...props} bind:value={domain} /></InputGroup>{/snippet}
	</Field>
</Stack>