AI Options

Tailwind CSS and Alpine JS AI Options

AI options are a great way to customize the AI agent's response. They can be used to configure the AI agent's behavior, appearance, and more.

AI voice tone selector

A voice tone selector that allows users to choose the AI agent's tone of voice.

Voice Tone 
<div class="" role="group" aria-labelledby="voiceToneTitle">
    <span id="voiceToneTitle" class="">Voice Tone</span>
    <div class="">

        <label class=""  for="checkToneFriendly">
            <input type="checkbox" class="" id="checkToneFriendly" value="friendly" name="tone" />
            <span class="">
                <span class="" aria-hidden="true">🤗</span>
                Friendly
            </span>
        </label>

        <label class=""  for="checkToneProfessional">
            <input type="checkbox" class="" id="checkToneProfessional" value="professional" name="tone" />
            <span class="">
                <span class="" aria-hidden="true">🤓</span>
                Professional
            </span>
        </label>

        <label class=""  for="checkToneCheerful">
            <input type="checkbox" class="" id="checkToneCheerful" value="cheerful" name="tone" />
            <span class="">
                <span class="" aria-hidden="true">🤩</span>
                Cheerful
            </span>
        </label>

        <label class=""  for="checkToneFunny">
            <input type="checkbox" class="" id="checkToneFunny" value="funny" name="tone" />
            <span class="">
                <span class="" aria-hidden="true">🤭</span>
                Funny
            </span>
        </label>

        <label class=""  for="checkTonePersuasive">
            <input type="checkbox" class="" id="checkTonePersuasive" value="persuasive" name="tone" />
            <span class="">
                <span class="" aria-hidden="true">😎</span>
                Persuasive
            </span>
        </label>
    </div>
</div>
<div class="" role="group" aria-labelledby="voiceToneTitle">
    <span id="voiceToneTitle" class="">Voice Tone</span>
    <div class="">

        <label class=""  for="checkToneFriendly">
            <input type="checkbox" class="" id="checkToneFriendly" value="friendly" name="tone" />
            <span class="">
                <span class="" aria-hidden="true">🤗</span>
                Friendly
            </span>
        </label>

        <label class=""  for="checkToneProfessional">
            <input type="checkbox" class="" id="checkToneProfessional" value="professional" name="tone" />
            <span class="">
                <span class="" aria-hidden="true">🤓</span>
                Professional
            </span>
        </label>

        <label class=""  for="checkToneCheerful">
            <input type="checkbox" class="" id="checkToneCheerful" value="cheerful" name="tone" />
            <span class="">
                <span class="" aria-hidden="true">🤩</span>
                Cheerful
            </span>
        </label>

        <label class=""  for="checkToneFunny">
            <input type="checkbox" class="" id="checkToneFunny" value="funny" name="tone" />
            <span class="">
                <span class="" aria-hidden="true">🤭</span>
                Funny
            </span>
        </label>

        <label class=""  for="checkTonePersuasive">
            <input type="checkbox" class="" id="checkTonePersuasive" value="persuasive" name="tone" />
            <span class="">
                <span class="" aria-hidden="true">😎</span>
                Persuasive
            </span>
        </label>
    </div>
</div>
@theme {
    /* light theme */
    --color-surface: var(--color-);
    --color-surface-alt: var(--color-);
    --color-on-surface: var(--color-);
    --color-on-surface-strong: var(--color-);
    --color-primary: var(--color-);
    --color-on-primary: var(--color-);
    --color-secondary: var(--color-);
    --color-on-secondary: var(--color-);
    --color-outline: ;
    --color-outline-strong: var(--color-);

    /* dark theme */
    --color-surface-dark: var(--color-);
    --color-surface-dark-alt: var(--color-);
    --color-on-surface-dark: var(--color-);
    --color-on-surface-dark-strong: var(--color-);
    --color-primary-dark: var(--color-);
    --color-on-primary-dark: var(--color-);
    --color-secondary-dark: var(--color-);
    --color-on-secondary-dark: var(--color-);
    --color-outline-dark: var(--color-);
    --color-outline-dark-strong: var(--color-);

    /* shared colors */
    --color-info: var(--color-);
    --color-on-info: var(--color-);
    --color-success: var(--color-);
    --color-on-success: var(--color-);
    --color-warning: var(--color-);
    --color-on-warning: var(--color-);
    --color-danger: var(--color-);
    --color-on-danger: var(--color-);

    /* border radius */
    --radius-radius: var(--radius);
}

AI image style selector

An image style selector that allows users to choose the AI agent's image style.

Image Style 
<div class="">
    <span id="voiceToneTitle" class="">Image Style</span>
    <div class="" role="group" aria-label="image style">
        <label for="imageStyleCustom" class="">
            <input type="file" id="imageStyleCustom" class=""/>
            <div class="">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="">
                    <path fill-rule="evenodd" d="M10.5 3.75a6 6 0 0 0-5.98 6.496A5.25 5.25 0 0 0 6.75 20.25H18a4.5 4.5 0 0 0 2.206-8.423 3.75 3.75 0 0 0-4.133-4.303A6.001 6.001 0 0 0 10.5 3.75Zm2.03 5.47a.75.75 0 0 0-1.06 0l-3 3a.75.75 0 1 0 1.06 1.06l1.72-1.72v4.94a.75.75 0 0 0 1.5 0v-4.94l1.72 1.72a.75.75 0 1 0 1.06-1.06l-3-3Z" clip-rule="evenodd"/>
                </svg>
            </div>
            <span class="">Upload</span>
        </label>

        <label for="imageStyleReal" class="" >
            <input id="imageStyleReal" type="radio" class="" value="real" name="imageStyle" checked />
            <img src="https://penguinui.s3.amazonaws.com/component-assets/image-styles/real.webp" class="" alt="real" aria-hidden="true"/>
            <span class="">real</span>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="" >
                <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm3.844-8.791a.75.75 0 0 0-1.188-.918l-3.7 4.79-1.649-1.833a.75.75 0 1 0-1.114 1.004l2.25 2.5a.75.75 0 0 0 1.15-.043l4.25-5.5Z" clip-rule="evenodd" />
            </svg>
        </label>

        <label for="imageStyleWatercolor" class="" >
            <input id="imageStyleWatercolor" type="radio" class="" value="watercolor" name="imageStyle" />
            <img src="https://penguinui.s3.amazonaws.com/component-assets/image-styles/watercolor.webp" class="" alt="watercolor" aria-hidden="true"/>
            <span class="">watercolor</span>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="" >
                <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm3.844-8.791a.75.75 0 0 0-1.188-.918l-3.7 4.79-1.649-1.833a.75.75 0 1 0-1.114 1.004l2.25 2.5a.75.75 0 0 0 1.15-.043l4.25-5.5Z" clip-rule="evenodd" />
            </svg>
        </label>

        <label for="imageStyle3d" class="" >
            <input id="imageStyle3d" type="radio" class="" value="3d" name="imageStyle" />
            <img src="https://penguinui.s3.amazonaws.com/component-assets/image-styles/3d.webp" class="" alt="3d" aria-hidden="true"/>
            <span class="">3d</span>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="" >
                <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm3.844-8.791a.75.75 0 0 0-1.188-.918l-3.7 4.79-1.649-1.833a.75.75 0 1 0-1.114 1.004l2.25 2.5a.75.75 0 0 0 1.15-.043l4.25-5.5Z" clip-rule="evenodd" />
            </svg>
        </label>

        <label for="imageStyleIsometric" class="" >
            <input id="imageStyleIsometric" type="radio" class="" value="isometric" name="imageStyle" />
            <img src="https://penguinui.s3.amazonaws.com/component-assets/image-styles/isometric.webp" class="" alt="isometric" aria-hidden="true"/>
            <span class="">isometric</span>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="" >
                <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm3.844-8.791a.75.75 0 0 0-1.188-.918l-3.7 4.79-1.649-1.833a.75.75 0 1 0-1.114 1.004l2.25 2.5a.75.75 0 0 0 1.15-.043l4.25-5.5Z" clip-rule="evenodd" />
            </svg>
        </label>

        <label for="imageStyleFlat" class="" >
            <input id="imageStyleFlat" type="radio" class="" value="flat" name="imageStyle" />
            <img src="https://penguinui.s3.amazonaws.com/component-assets/image-styles/flat.webp" class="" alt="flat" aria-hidden="true"/>
            <span class="">flat</span>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="" >
                <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm3.844-8.791a.75.75 0 0 0-1.188-.918l-3.7 4.79-1.649-1.833a.75.75 0 1 0-1.114 1.004l2.25 2.5a.75.75 0 0 0 1.15-.043l4.25-5.5Z" clip-rule="evenodd" />
            </svg>
        </label>
    </div>
</div>
<div class="">
    <span id="voiceToneTitle" class="">Image Style</span>
    <div class="" role="group" aria-label="image style">
        <label for="imageStyleCustom" class="">
            <input type="file" id="imageStyleCustom" class=""/>
            <div class="">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="">
                    <path fill-rule="evenodd" d="M10.5 3.75a6 6 0 0 0-5.98 6.496A5.25 5.25 0 0 0 6.75 20.25H18a4.5 4.5 0 0 0 2.206-8.423 3.75 3.75 0 0 0-4.133-4.303A6.001 6.001 0 0 0 10.5 3.75Zm2.03 5.47a.75.75 0 0 0-1.06 0l-3 3a.75.75 0 1 0 1.06 1.06l1.72-1.72v4.94a.75.75 0 0 0 1.5 0v-4.94l1.72 1.72a.75.75 0 1 0 1.06-1.06l-3-3Z" clip-rule="evenodd"/>
                </svg>
            </div>
            <span class="">Upload</span>
        </label>

        <label for="imageStyleReal" class="" >
            <input id="imageStyleReal" type="radio" class="" value="real" name="imageStyle" checked />
            <img src="https://penguinui.s3.amazonaws.com/component-assets/image-styles/real.webp" class="" alt="real" aria-hidden="true"/>
            <span class="">real</span>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="" >
                <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm3.844-8.791a.75.75 0 0 0-1.188-.918l-3.7 4.79-1.649-1.833a.75.75 0 1 0-1.114 1.004l2.25 2.5a.75.75 0 0 0 1.15-.043l4.25-5.5Z" clip-rule="evenodd" />
            </svg>
        </label>

        <label for="imageStyleWatercolor" class="" >
            <input id="imageStyleWatercolor" type="radio" class="" value="watercolor" name="imageStyle" />
            <img src="https://penguinui.s3.amazonaws.com/component-assets/image-styles/watercolor.webp" class="" alt="watercolor" aria-hidden="true"/>
            <span class="">watercolor</span>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="" >
                <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm3.844-8.791a.75.75 0 0 0-1.188-.918l-3.7 4.79-1.649-1.833a.75.75 0 1 0-1.114 1.004l2.25 2.5a.75.75 0 0 0 1.15-.043l4.25-5.5Z" clip-rule="evenodd" />
            </svg>
        </label>

        <label for="imageStyle3d" class="" >
            <input id="imageStyle3d" type="radio" class="" value="3d" name="imageStyle" />
            <img src="https://penguinui.s3.amazonaws.com/component-assets/image-styles/3d.webp" class="" alt="3d" aria-hidden="true"/>
            <span class="">3d</span>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="" >
                <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm3.844-8.791a.75.75 0 0 0-1.188-.918l-3.7 4.79-1.649-1.833a.75.75 0 1 0-1.114 1.004l2.25 2.5a.75.75 0 0 0 1.15-.043l4.25-5.5Z" clip-rule="evenodd" />
            </svg>
        </label>

        <label for="imageStyleIsometric" class="" >
            <input id="imageStyleIsometric" type="radio" class="" value="isometric" name="imageStyle" />
            <img src="https://penguinui.s3.amazonaws.com/component-assets/image-styles/isometric.webp" class="" alt="isometric" aria-hidden="true"/>
            <span class="">isometric</span>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="" >
                <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm3.844-8.791a.75.75 0 0 0-1.188-.918l-3.7 4.79-1.649-1.833a.75.75 0 1 0-1.114 1.004l2.25 2.5a.75.75 0 0 0 1.15-.043l4.25-5.5Z" clip-rule="evenodd" />
            </svg>
        </label>

        <label for="imageStyleFlat" class="" >
            <input id="imageStyleFlat" type="radio" class="" value="flat" name="imageStyle" />
            <img src="https://penguinui.s3.amazonaws.com/component-assets/image-styles/flat.webp" class="" alt="flat" aria-hidden="true"/>
            <span class="">flat</span>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="" >
                <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm3.844-8.791a.75.75 0 0 0-1.188-.918l-3.7 4.79-1.649-1.833a.75.75 0 1 0-1.114 1.004l2.25 2.5a.75.75 0 0 0 1.15-.043l4.25-5.5Z" clip-rule="evenodd" />
            </svg>
        </label>
    </div>
</div>
@theme {
    /* light theme */
    --color-surface: var(--color-);
    --color-surface-alt: var(--color-);
    --color-on-surface: var(--color-);
    --color-on-surface-strong: var(--color-);
    --color-primary: var(--color-);
    --color-on-primary: var(--color-);
    --color-secondary: var(--color-);
    --color-on-secondary: var(--color-);
    --color-outline: ;
    --color-outline-strong: var(--color-);

    /* dark theme */
    --color-surface-dark: var(--color-);
    --color-surface-dark-alt: var(--color-);
    --color-on-surface-dark: var(--color-);
    --color-on-surface-dark-strong: var(--color-);
    --color-primary-dark: var(--color-);
    --color-on-primary-dark: var(--color-);
    --color-secondary-dark: var(--color-);
    --color-on-secondary-dark: var(--color-);
    --color-outline-dark: var(--color-);
    --color-outline-dark-strong: var(--color-);

    /* shared colors */
    --color-info: var(--color-);
    --color-on-info: var(--color-);
    --color-success: var(--color-);
    --color-on-success: var(--color-);
    --color-warning: var(--color-);
    --color-on-warning: var(--color-);
    --color-danger: var(--color-);
    --color-on-danger: var(--color-);

    /* border radius */
    --radius-radius: var(--radius);
}

AI model selector

An engine model selector that allows users to choose the AI agent's engine model.

AI Model 
<div class="" role="group" aria-labelledby="aiModelTitle">
    <span id="aiModelTitle" class="">Model</span>

    <label for="model3" class="">
            <div class="">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="" aria-hidden="true">
                    <path d="M15.98 1.804a1 1 0 0 0-1.96 0l-.24 1.192a1 1 0 0 1-.784.785l-1.192.238a1 1 0 0 0 0 1.962l1.192.238a1 1 0 0 1 .785.785l.238 1.192a1 1 0 0 0 1.962 0l.238-1.192a1 1 0 0 1 .785-.785l1.192-.238a1 1 0 0 0 0-1.962l-1.192-.238a1 1 0 0 1-.785-.785l-.238-1.192ZM6.949 5.684a1 1 0 0 0-1.898 0l-.683 2.051a1 1 0 0 1-.633.633l-2.051.683a1 1 0 0 0 0 1.898l2.051.684a1 1 0 0 1 .633.632l.683 2.051a1 1 0 0 0 1.898 0l.683-2.051a1 1 0 0 1 .633-.633l2.051-.683a1 1 0 0 0 0-1.898l-2.051-.683a1 1 0 0 1-.633-.633L6.95 5.684ZM13.949 13.684a1 1 0 0 0-1.898 0l-.184.551a1 1 0 0 1-.632.633l-.551.183a1 1 0 0 0 0 1.898l.551.183a1 1 0 0 1 .633.633l.183.551a1 1 0 0 0 1.898 0l.184-.551a1 1 0 0 1 .632-.633l.551-.183a1 1 0 0 0 0-1.898l-.551-.184a1 1 0 0 1-.633-.632l-.183-.551Z"/>
                </svg>
                <div class="">
                    <p class="">Pengu AI 3.1</p>
                    <p class="">The most advanced AI model</p>
                </div>
            </div>
            <input id="model3" type="radio" class="" name="model" value="3.1" />
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                class="" aria-hidden="true">
                <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd"/>
            </svg>
    </label>

    <label for="model2" class="">
            <div class="">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="" aria-hidden="true">
                    <path d="M15.98 1.804a1 1 0 0 0-1.96 0l-.24 1.192a1 1 0 0 1-.784.785l-1.192.238a1 1 0 0 0 0 1.962l1.192.238a1 1 0 0 1 .785.785l.238 1.192a1 1 0 0 0 1.962 0l.238-1.192a1 1 0 0 1 .785-.785l1.192-.238a1 1 0 0 0 0-1.962l-1.192-.238a1 1 0 0 1-.785-.785l-.238-1.192ZM6.949 5.684a1 1 0 0 0-1.898 0l-.683 2.051a1 1 0 0 1-.633.633l-2.051.683a1 1 0 0 0 0 1.898l2.051.684a1 1 0 0 1 .633.632l.683 2.051a1 1 0 0 0 1.898 0l.683-2.051a1 1 0 0 1 .633-.633l2.051-.683a1 1 0 0 0 0-1.898l-2.051-.683a1 1 0 0 1-.633-.633L6.95 5.684ZM13.949 13.684a1 1 0 0 0-1.898 0l-.184.551a1 1 0 0 1-.632.633l-.551.183a1 1 0 0 0 0 1.898l.551.183a1 1 0 0 1 .633.633l.183.551a1 1 0 0 0 1.898 0l.184-.551a1 1 0 0 1 .632-.633l.551-.183a1 1 0 0 0 0-1.898l-.551-.184a1 1 0 0 1-.633-.632l-.183-.551Z"/>
                </svg>
                <div class="">
                    <p class="">Pengu AI 2.4</p>
                    <p class="">The older AI model</p>
                </div>
            </div>
            <input id="model2" type="radio" class="" name="model" value="2.4" checked />
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                class="" aria-hidden="true">
                <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd"/>
            </svg>
    </label>

    <button type="button" class="">Upgrade to Pro</button>
</div>
<div class="" role="group" aria-labelledby="aiModelTitle">
    <span id="aiModelTitle" class="">Model</span>

    <label for="model3" class="">
            <div class="">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="" aria-hidden="true">
                    <path d="M15.98 1.804a1 1 0 0 0-1.96 0l-.24 1.192a1 1 0 0 1-.784.785l-1.192.238a1 1 0 0 0 0 1.962l1.192.238a1 1 0 0 1 .785.785l.238 1.192a1 1 0 0 0 1.962 0l.238-1.192a1 1 0 0 1 .785-.785l1.192-.238a1 1 0 0 0 0-1.962l-1.192-.238a1 1 0 0 1-.785-.785l-.238-1.192ZM6.949 5.684a1 1 0 0 0-1.898 0l-.683 2.051a1 1 0 0 1-.633.633l-2.051.683a1 1 0 0 0 0 1.898l2.051.684a1 1 0 0 1 .633.632l.683 2.051a1 1 0 0 0 1.898 0l.683-2.051a1 1 0 0 1 .633-.633l2.051-.683a1 1 0 0 0 0-1.898l-2.051-.683a1 1 0 0 1-.633-.633L6.95 5.684ZM13.949 13.684a1 1 0 0 0-1.898 0l-.184.551a1 1 0 0 1-.632.633l-.551.183a1 1 0 0 0 0 1.898l.551.183a1 1 0 0 1 .633.633l.183.551a1 1 0 0 0 1.898 0l.184-.551a1 1 0 0 1 .632-.633l.551-.183a1 1 0 0 0 0-1.898l-.551-.184a1 1 0 0 1-.633-.632l-.183-.551Z"/>
                </svg>
                <div class="">
                    <p class="">Pengu AI 3.1</p>
                    <p class="">The most advanced AI model</p>
                </div>
            </div>
            <input id="model3" type="radio" class="" name="model" value="3.1" />
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                class="" aria-hidden="true">
                <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd"/>
            </svg>
    </label>

    <label for="model2" class="">
            <div class="">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="" aria-hidden="true">
                    <path d="M15.98 1.804a1 1 0 0 0-1.96 0l-.24 1.192a1 1 0 0 1-.784.785l-1.192.238a1 1 0 0 0 0 1.962l1.192.238a1 1 0 0 1 .785.785l.238 1.192a1 1 0 0 0 1.962 0l.238-1.192a1 1 0 0 1 .785-.785l1.192-.238a1 1 0 0 0 0-1.962l-1.192-.238a1 1 0 0 1-.785-.785l-.238-1.192ZM6.949 5.684a1 1 0 0 0-1.898 0l-.683 2.051a1 1 0 0 1-.633.633l-2.051.683a1 1 0 0 0 0 1.898l2.051.684a1 1 0 0 1 .633.632l.683 2.051a1 1 0 0 0 1.898 0l.683-2.051a1 1 0 0 1 .633-.633l2.051-.683a1 1 0 0 0 0-1.898l-2.051-.683a1 1 0 0 1-.633-.633L6.95 5.684ZM13.949 13.684a1 1 0 0 0-1.898 0l-.184.551a1 1 0 0 1-.632.633l-.551.183a1 1 0 0 0 0 1.898l.551.183a1 1 0 0 1 .633.633l.183.551a1 1 0 0 0 1.898 0l.184-.551a1 1 0 0 1 .632-.633l.551-.183a1 1 0 0 0 0-1.898l-.551-.184a1 1 0 0 1-.633-.632l-.183-.551Z"/>
                </svg>
                <div class="">
                    <p class="">Pengu AI 2.4</p>
                    <p class="">The older AI model</p>
                </div>
            </div>
            <input id="model2" type="radio" class="" name="model" value="2.4" checked />
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                class="" aria-hidden="true">
                <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd"/>
            </svg>
    </label>

    <button type="button" class="">Upgrade to Pro</button>
</div>
@theme {
    /* light theme */
    --color-surface: var(--color-);
    --color-surface-alt: var(--color-);
    --color-on-surface: var(--color-);
    --color-on-surface-strong: var(--color-);
    --color-primary: var(--color-);
    --color-on-primary: var(--color-);
    --color-secondary: var(--color-);
    --color-on-secondary: var(--color-);
    --color-outline: ;
    --color-outline-strong: var(--color-);

    /* dark theme */
    --color-surface-dark: var(--color-);
    --color-surface-dark-alt: var(--color-);
    --color-on-surface-dark: var(--color-);
    --color-on-surface-dark-strong: var(--color-);
    --color-primary-dark: var(--color-);
    --color-on-primary-dark: var(--color-);
    --color-secondary-dark: var(--color-);
    --color-on-secondary-dark: var(--color-);
    --color-outline-dark: var(--color-);
    --color-outline-dark-strong: var(--color-);

    /* shared colors */
    --color-info: var(--color-);
    --color-on-info: var(--color-);
    --color-success: var(--color-);
    --color-on-success: var(--color-);
    --color-warning: var(--color-);
    --color-on-warning: var(--color-);
    --color-danger: var(--color-);
    --color-on-danger: var(--color-);

    /* border radius */
    --radius-radius: var(--radius);
}

Keyboard Navigation

Key Action
Tab Next focusable element gets the focus
Space Enter Focused item gets selected