Lineone - From Radio

Basic Radio

Code

Radio are generally used in radio groups collections of radio buttons describing a set of related options. Check out code for detail of usage.

Default Primary Secondary Info Success Warning Error

                
  <label class="inline-flex items-center space-x-2">
    <input
      checked
      class="form-radio is-basic size-5 rounded-full border-slate-400/70 checked:border-slate-500 checked:bg-slate-500 hover:border-slate-500 focus:border-slate-500 dark:border-navy-400 dark:checked:bg-navy-400"
      name="basic"
      type="radio"
    />
    <p>Default</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-radio is-basic size-5 rounded-full border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
      name="basic"
      type="radio"
    />
    <p>Primary</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-radio is-basic size-5 rounded-full border-slate-400/70 checked:border-secondary checked:bg-secondary hover:border-secondary focus:border-secondary dark:border-navy-400 dark:checked:border-secondary-light dark:checked:bg-secondary-light dark:hover:border-secondary-light dark:focus:border-secondary-light"
      name="basic"
      type="radio"
    />
    <p>Secondary</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-radio is-basic size-5 rounded-full border-slate-400/70 checked:!border-info checked:bg-info hover:!border-info focus:!border-info dark:border-navy-400"
      name="basic"
      type="radio"
    />
    <p>Info</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-radio is-basic size-5 rounded-full border-slate-400/70 checked:!border-success checked:bg-success hover:!border-success focus:!border-success dark:border-navy-400"
      name="basic"
      type="radio"
    />
    <p>Success</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-radio is-basic size-5 rounded-full border-slate-400/70 checked:!border-warning checked:bg-warning hover:!border-warning focus:!border-warning dark:border-navy-400"
      name="basic"
      type="radio"
    />
    <p>Warning</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-radio is-basic size-5 rounded-full border-slate-400/70 checked:!border-error checked:bg-error hover:!border-error focus:!border-error dark:border-navy-400"
      name="basic"
      type="radio"
    />
    <p>Error</p>
  </label>

Filled Radio

Code

The radio component can be filled. Check out code for detail of usage.

Default Primary Secondary Info Success Warning Error

                
  <label class="inline-flex items-center space-x-2">
    <input
      checked
      class="form-radio is-basic size-5 rounded-full border-slate-400/70 bg-slate-100 checked:border-slate-500 checked:bg-slate-500 hover:border-slate-500 focus:border-slate-500 dark:border-navy-500 dark:bg-navy-900 dark:checked:border-navy-400 dark:checked:bg-navy-400"
      name="basic_filled"
      type="radio"
    />
    <p>Default</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-radio is-basic size-5 rounded-full border-slate-400/70 bg-slate-100 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-500 dark:bg-navy-900 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
      name="basic_filled"
      type="radio"
    />
    <p>Primary</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-radio is-basic size-5 rounded-full border-slate-400/70 bg-slate-100 checked:border-secondary checked:bg-secondary hover:border-secondary focus:border-secondary dark:border-navy-500 dark:bg-navy-900 dark:checked:border-secondary-light dark:checked:bg-secondary-light dark:hover:border-secondary-light dark:focus:border-secondary-light"
      name="basic_filled"
      type="radio"
    />
    <p>Secondary</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-radio is-basic size-5 rounded-full border-slate-400/70 bg-slate-100 checked:!border-info checked:!bg-info hover:!border-info focus:!border-info dark:border-navy-500 dark:bg-navy-900"
      name="basic_filled"
      type="radio"
    />
    <p>Info</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-radio is-basic size-5 rounded-full border-slate-400/70 bg-slate-100 checked:!border-success checked:!bg-success hover:!border-success focus:!border-success dark:border-navy-500 dark:bg-navy-900"
      name="basic_filled"
      type="radio"
    />
    <p>Success</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-radio is-basic size-5 rounded-full border-slate-400/70 bg-slate-100 checked:!border-warning checked:!bg-warning hover:!border-warning focus:!border-warning dark:border-navy-500 dark:bg-navy-900"
      name="basic_filled"
      type="radio"
    />
    <p>Warning</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-radio is-basic size-5 rounded-full border-slate-400/70 bg-slate-100 checked:!border-error checked:!bg-error hover:!border-error focus:!border-error dark:border-navy-500 dark:bg-navy-900"
      name="basic_filled"
      type="radio"
    />
    <p>Error</p>
  </label>

Outline Radio

Code

The radio component can be outtlined. Check out code for detail of usage.

Default Primary Secondary Info Success Warning Error

                
  <label class="inline-flex items-center space-x-2">
    <input
      checked
      class="form-radio is-outline size-5 rounded-full border-slate-400/70 before:bg-slate-500 checked:border-slate-500 hover:border-slate-500 focus:border-slate-500 dark:border-navy-400 dark:before:bg-navy-200 dark:checked:border-navy-200 dark:hover:border-navy-200 dark:focus:border-navy-200"
      name="outline"
      type="radio"
    />
    <p>Default</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-radio is-outline size-5 rounded-full border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
      name="outline"
      type="radio"
    />
    <p>Primary</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-radio is-outline size-5 rounded-full border-slate-400/70 before:bg-secondary checked:border-secondary hover:border-secondary focus:border-secondary dark:border-navy-400 dark:before:bg-secondary-light dark:checked:border-secondary-light dark:hover:border-secondary-light dark:focus:border-secondary-light"
      name="outline"
      type="radio"
    />
    <p>Secondary</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-radio is-outline size-5 rounded-full border-slate-400/70 before:!bg-info checked:!border-info hover:!border-info focus:!border-info dark:border-navy-400"
      name="outline"
      type="radio"
    />
    <p>Info</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-radio is-outline size-5 rounded-full border-slate-400/70 before:!bg-success checked:!border-success hover:!border-success focus:!border-success dark:border-navy-400"
      name="outline"
      type="radio"
    />
    <p>Success</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-radio is-outline size-5 rounded-full border-slate-400/70 before:!bg-warning checked:!border-warning hover:!border-warning focus:!border-warning dark:border-navy-400"
      name="outline"
      type="radio"
    />
    <p>Warning</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-radio is-outline size-5 rounded-full border-slate-400/70 before:!bg-error checked:!border-error hover:!border-error focus:!border-error dark:border-navy-400"
      name="outline"
      type="radio"
    />
    <p>Error</p>
  </label>

Outline Filled

Code

The radio component can be outlined and filled. Check out code for detail of usage.

Default Primary Secondary Info Success Warning Error

                
  <label class="inline-flex items-center space-x-2">
    <input
      checked
      class="form-radio is-outline size-5 rounded-full border-slate-400/70 bg-slate-100 before:bg-slate-500 checked:border-slate-500 hover:border-slate-500 focus:border-slate-500 dark:border-navy-500 dark:bg-navy-900 dark:before:bg-navy-200 dark:checked:border-navy-200 dark:hover:border-navy-200 dark:focus:border-navy-200"
      name="outline_filled"
      type="radio"
    />
    <p>Default</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-radio is-outline size-5 rounded-full border-slate-400/70 bg-slate-100 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-500 dark:bg-navy-900 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
      name="outline_filled"
      type="radio"
    />
    <p>Primary</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-radio is-outline size-5 rounded-full border-slate-400/70 bg-slate-100 before:bg-secondary checked:border-secondary hover:border-secondary focus:border-secondary dark:border-navy-500 dark:bg-navy-900 dark:before:bg-secondary-light dark:checked:border-secondary-light dark:hover:border-secondary-light dark:focus:border-secondary-light"
      name="outline_filled"
      type="radio"
    />
    <p>Secondary</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-radio is-outline size-5 rounded-full border-slate-400/70 bg-slate-100 before:!bg-info checked:!border-info hover:!border-info focus:!border-info dark:border-navy-500 dark:bg-navy-900"
      name="outline_filled"
      type="radio"
    />
    <p>Info</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-radio is-outline size-5 rounded-full border-slate-400/70 bg-slate-100 before:!bg-success checked:!border-success hover:!border-success focus:!border-success dark:border-navy-500 dark:bg-navy-900"
      name="outline_filled"
      type="radio"
    />
    <p>Success</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-radio is-outline size-5 rounded-full border-slate-400/70 bg-slate-100 before:!bg-warning checked:!border-warning hover:!border-warning focus:!border-warning dark:border-navy-500 dark:bg-navy-900"
      name="outline_filled"
      type="radio"
    />
    <p>Warning</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-radio is-outline size-5 rounded-full border-slate-400/70 bg-slate-100 before:!bg-error checked:!border-error hover:!border-error focus:!border-error dark:border-navy-500 dark:bg-navy-900"
      name="outline_filled"
      type="radio"
    />
    <p>Error</p>
  </label>

Outline Squircle

Code

The radio component can have a squircle shape. Check out code for detail of usage

Default Primary Secondary Info Success Warning Error

                
  <label class="inline-flex items-center space-x-2">
    <input
      checked
      class="form-radio is-outline size-5 rounded-md border-slate-400/70 before:bg-slate-500 checked:border-slate-500 hover:border-slate-500 focus:border-slate-500 dark:border-navy-400 dark:before:bg-navy-200 dark:hover:border-navy-200 dark:focus:border-navy-200"
      name="outline_squircle"
      type="radio"
    />
    <p>Default</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-radio is-outline size-5 rounded-md border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
      name="outline_squircle"
      type="radio"
    />
    <p>Primary</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-radio is-outline size-5 rounded-md border-slate-400/70 before:bg-secondary checked:border-secondary hover:border-secondary focus:border-secondary dark:border-navy-400 dark:before:bg-secondary-light dark:checked:border-secondary-light dark:hover:border-secondary-light dark:focus:border-secondary-light"
      name="outline_squircle"
      type="radio"
    />
    <p>Secondary</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-radio is-outline size-5 rounded-md border-slate-400/70 before:!bg-info checked:!border-info hover:!border-info focus:!border-info dark:border-navy-400"
      name="outline_squircle"
      type="radio"
    />
    <p>Info</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-radio is-outline size-5 rounded-md border-slate-400/70 before:!bg-success checked:!border-success hover:!border-success focus:!border-success dark:border-navy-400"
      name="outline_squircle"
      type="radio"
    />
    <p>Success</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-radio is-outline size-5 rounded-md border-slate-400/70 before:!bg-warning checked:!border-warning hover:!border-warning focus:!border-warning dark:border-navy-400"
      name="outline_squircle"
      type="radio"
    />
    <p>Warning</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-radio is-outline size-5 rounded-md border-slate-400/70 before:!bg-error checked:!border-error hover:!border-error focus:!border-error dark:border-navy-400"
      name="outline_squircle"
      type="radio"
    />
    <p>Error</p>
  </label>

Disabled Radio

Code

The radio have their own style when disabled. Check out code for detail of usage.

Primary Primary

                
  <label class="inline-flex items-center space-x-2">
    <input
      disabled
      class="form-radio is-basic size-5 rounded-full border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary disabled:pointer-events-none disabled:border-slate-300 disabled:opacity-60 dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent dark:disabled:border-navy-450"
      name="disabled"
      type="radio"
    />
    <p>Primary</p>
  </label>

  <label class="inline-flex items-center space-x-2">
    <input
      disabled
      checked
      class="form-radio is-basic size-5 rounded-full border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary disabled:pointer-events-none disabled:border-slate-300 disabled:opacity-60 dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent dark:disabled:border-navy-450"
      name="disabled"
      type="radio"
    />
    <p>Primary</p>
  </label>

Radio Size

Code

The radio component can have various sizes. Check out code for detail of usage.

1 2 3 4 5 6

                
  <label class="inline-flex items-center space-x-2">
    <input
      checked
      class="form-radio is-basic size-3 rounded-full border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
      name="size"
      type="radio"
    />
    <p>1</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-radio is-basic size-3.5 rounded-full border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
      name="size"
      type="radio"
    />
    <p>2</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-radio is-basic size-4 rounded-full border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
      name="size"
      type="radio"
    />
    <p>3</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-radio is-basic size-4.5 rounded-full border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
      name="size"
      type="radio"
    />
    <p>4</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-radio is-basic size-5 rounded-full border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
      name="size"
      type="radio"
    />
    <p>5</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-radio is-basic size-6 rounded-full border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
      name="size"
      type="radio"
    />
    <p>6</p>
  </label>

Radio Model

Code

Model allows you to bind the value of an input element to data Check out code for detail of usage.

Apple PineApple Strawberry Orange

Value

                
  <div x-data="{selectedFruit: ['apple']}">
    <div class="inline-space">
      <label class="inline-flex items-center space-x-2">
        <input
          x-model="selectedFruit"
          value="apple"
          class="form-radio is-outline size-5 rounded-full border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
          name="model"
          type="radio"
        />
        <p>Apple</p>
      </label>
      <label class="inline-flex items-center space-x-2">
        <input
          x-model="selectedFruit"
          value="pineapple"
          class="form-radio is-outline size-5 rounded-full border-slate-400/70 before:bg-secondary checked:border-secondary hover:border-secondary focus:border-secondary dark:border-navy-400 dark:before:bg-secondary-light dark:checked:border-secondary-light dark:hover:border-secondary-light dark:focus:border-secondary-light"
          name="model"
          type="radio"
        />
        <p>PineApple</p>
      </label>
      <label class="inline-flex items-center space-x-2">
        <input
          x-model="selectedFruit"
          value="strawberry"
          class="form-radio is-outline size-5 rounded-full border-slate-400/70 before:!bg-info checked:!border-info hover:!border-info focus:!border-info dark:border-navy-400"
          name="model"
          type="radio"
        />
        <p>Strawberry</p>
      </label>
      <label class="inline-flex items-center space-x-2">
        <input
          x-model="selectedFruit"
          value="orange"
          class="form-radio is-outline size-5 rounded-full border-slate-400/70 before:!bg-success checked:!border-success hover:!border-success focus:!border-success dark:border-navy-400"
          name="model"
          type="radio"
        />
        <p>Orange</p>
      </label>
    </div>
    <p>Value <span x-text="selectedFruit"></span></p>
  </div>

Profile

Messages

Team

Activity

Settings

Notifications

Banking cards

Pinned Apps

Stock Market

BTC

SOL

Latest News

Settings

Form Radio

Basic Radio

Filled Radio

Outline Radio

Outline Filled

Outline Squircle

Disabled Radio

Radio Size

Radio Model